<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script>

<!--ajax实时验证用户名-->

<input type="text" value="" name="name" datatype="e" ajaxurl="valid.php?myparam1=value1&myparam2=value2" sucmsg="用户名验证通过！" nullmsg="请输入用户名！" errormsg="请用邮箱或手机号码注册！"  />

<!--密码-->

<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间！" />

<!--确认密码-->

<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />

<!--默认提示文字-->

<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！"  datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>

<!--使用swfupload插件-->

<input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value="">

<input type="hidden" value="" pluginhidden="swfupload">

<!--使用passwordStrength插件-->

<input type="password" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value="">

<div class="passwordStrength" style="display:none;"><b>密码强度：</b> <span>弱</span><span>中</span><span class="last">强</span></div>

<!--使用DatePicker插件-->

<input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">

$(".demoform").Validform({

    btnSubmit:"#btn_sub",

    btnReset:".btn_reset",

    tiptype:,

    ignoreHidden:false,

    dragonfly:false,

    tipSweep:true,

    label:".label",

    showAllError:false,

    postonce:true,

    ajaxPost:true,

    datatype:{

        "*6-20": /^[^\s]{,}$/,

        "z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{,}$/,

        "username":function(gets,obj,curform,regxp){

            //参数gets是获取到的表单元素值，obj为当前表单元素，curform为当前验证的表单，regxp为内置的一些正则表达式的引用;

            var reg1=/^[\w\.]{,}$/,

                reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{,}$/;

            if(reg1.test(gets)){return true;}

            if(reg2.test(gets)){return true;}

            return false;

            //注意return可以返回true 或 false 或 字符串文字，true表示验证通过，返回字符串表示验证失败，字符串作为错误提示显示，返回false则用errmsg或默认的错误提示;

        },

        "phone":function(){

            // 5.0 版本之后，要实现二选一的验证效果，datatype 的名称 不 需要以 "option_" 开头;

        }

    },

    usePlugin:{

        swfupload:{},

        datepicker:{},

        passwordstrength:{},

        jqtransform:{

            selector:"select,input"

        }

    },

    beforeCheck:function(curform){

        //在表单提交执行验证之前执行的函数，curform参数是当前表单对象。

        //这里明确return false的话将不会继续执行验证操作;

    },

    beforeSubmit:function(curform){

        //在验证成功后，表单提交前执行的函数，curform参数是当前表单对象。

        //这里明确return false的话表单将不会提交;

    },

    callback:function(data){

        //返回数据data是json对象，{"info":"demo info","status":"y"}

        //info: 输出提示信息;

        //status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功，"n"表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作;

        //你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作；

        //ajax遇到服务端错误时也会执行回调，这时的data是{ status:**, statusText:**, readyState:**, responseText:** }；

        //这里执行回调操作;

        //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。

    }

});

如示例 var demo=$(".formsub").Validform()，那么demo对象会有以下属性和方法可以调用：

如：demo.tipmsg.s="error! no message inputed.";

通过该对象可以修改除 tit 以外的其他提示文字，这样可以实现同一个页面的不同表单使用不同的提示文字。

具体可修改的提示文字

$.Tipmsg={//默认提示文字;

tit:"提示信息",

w:{

    "*":"不能为空！",

    "*6-16":"请填写6到16位任意字符！",

    "n":"请填写数字！",

    "n6-16":"请填写6到16位数字！",

    "s":"不能输入特殊字符！",

    "s6-18":"请填写6到18位字符！",

    "p":"请填写邮政编码！",

    "m":"请填写手机号码！",

    "e":"邮箱地址格式不对！",

    "url":"请填写网址！"

},

def:"请填写正确信息！",

undef:"datatype未定义！",

reck:"两次输入的内容不一致！",

r:"通过信息验证！",

c:"正在检测信息…",

s:"请{填写|选择}{0|信息}！",

v:"所填信息没有经过验证，请稍后…",

p:"正在提交数据…"

};

要修改tit（弹出框的标题文字）的话，可以这样：$.Tipmsg.tit="Message Box"，则弹出框的标题文字会换成"Message Box"

注：5.3.2+
$.Tipmsg.w里，形如"*6-16"的提示文字，里面的数字是会被替换的。如绑定datatype="*2-18"，那它默认的出错信息就会是"请填写2到18位任意字符！"，可以通过$.Tipmsg.w或Validform对象的tipmsg属性修改和扩展默认错误信息，如果你已经设置了"zh2-4"的提示信息是"2-4位中文",那么"zh2-8"出错的信息就自动会是："2-8位中文"。对于自定义的datatype，在扩展默认信息时，注意错误信息的名字要跟datatype名字一样，如上面示例是：$.Tipmsg.w["zh2-4"]="2-4位中文"。对于多页面或一个页面多表单有相同datatype来说，在$.Tipmsg.w或Validform对象的tipmsg属性中扩展默认提示信息是个很好的选择。
5.3.1+ 
$.Tipmsg.s是用来指定在没有绑定nullmsg时的默认提示信息。"{0}"是会被找到的label参数指定的对象或Validform_label里的文字替换掉的，"{填写|选择}"里的文字在绑定了"recheck"属性的表单元素上检测时是会不显示的，当前验证对象是radio、checkbox或select时，会输出"选择"，是其他类型的元素时会输出"填写"和后面的"信息"。

具体示例请参见demo页。

获取内置的一些正则：

{

    "match":/^(.+?)(\d+)-(\d+)$/,

    "*":/[\w\W]+/,

    "*6-16":/^[\w\W]{6,16}$/,

    "n":/^\d+$/,

    "n6-16":/^\d{6,16}$/,

    "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,

    "s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,

    "p":/^[0-9]{6}$/,

    "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/,

    "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,

    "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/

}

可以通过Validform对象的这个方法来给表单元素绑定验证规则，绑定验证类型中列出的附加属性都可以通过这个方法绑定。

demo.addRule([

    {

        ele:"#name",

        datatype:"s6-18",

        ajaxurl:"valid.php",

        nullmsg:"请输入昵称！",

        errormsg:"昵称至少6个字符,最多18个字符！"

    },

    {

        ele:"#userpassword",

        datatype:"*6-16",

        nullmsg:"请设置密码！",

        errormsg:"密码范围在6~16位之间！"

    },

    {

        ele:"#userpassword2",

        datatype:"*",

        recheck:"userpassword",

        nullmsg:"请再输入一次密码！",

        errormsg:"您两次输入的账号密码不一致！"

    }

]);

其中ele是指定要绑定规则的对象，会在Validform对象下查找这些对象。

获取Validform对象的第n个元素。

如你页面上有多个form的class都是formsub，执行上面的验证绑定，得到的demo对象就可以操作所有这些表单，如果你要对其中某个表单执行某些操作，那么就可以使用这个方法。

如demo.eq(0).resetForm()，重置第一个表单。

以ajax方式提交表单。flag为true时，跳过验证直接提交，sync为true时将以同步的方式进行ajax提交。

参数url是5.3版新增，传入了url地址时，表单会提交到这个地址

如demo.ajaxPost(true)，不做验证直接ajax提交表单。

终止ajax的提交。

如执行上面的ajaxPost()之后，发现某些项填写不对，想取消表单提交，那么就可以执行这个操作：demo.abort()

以初始化时传入参数的设置方式提交表单，flag为true时，跳过验证直接提交。

参数url是5.3版新增，传入了url地址时，表单会提交到这个地址

如demo.submitForm(true)，不做验证直接提交表单。

重置表单。

如demo.resetForm()，重置表单到初始状态。

重置表单的提交状态。传入了postonce参数的话，表单成功提交后状态会设置为"posted"，重置提交状态可以让表单继续可以提交。

如demo.resetStatus()

获取表单的提交状态，normal：未提交，posting：正在提交，posted：已成功提交过。

如demo.getStatus()

设置表单的提交状态，可以设置normal，posting，posted三种状态，不传参则设置状态为posting，这个状态表单可以验证，但不能提交。

如demo.setStatus("posted")

忽略对所选择对象的验证，不传入selector则忽略所有表单元素。

如demo.ignore("select,textarea,#name")，忽略Validform对象下所有select，textarea及一个id为"name"元素的验证。

将ignore方法所忽略验证的对象重新获取验证效果，不传入selector则恢复验证所有表单元素。

如demo.unignore("select,textarea,#name")，恢复Validform对象下所有select，textarea及一个id为"name"元素的验证。

bool为true时则只验证不显示提示信息

对指定对象进行验证(默认验证当前整个表单)，通过返回true，否则返回false（绑定实时验证的对象，格式符合要求时返回true，而不会等ajax的返回结果）

如demo.check()，验证当前整个表单，且只验证但不显示对错信息。

setup参数是一个对象。

如:

demo.config({

    showAllError:true,

    url:"这里指定提交地址",

    ajaxpost:{

        //可以传入$.ajax()能使用的，除dataType外的所有参数;

    },

    ajaxurl:{

        //可以传入$.ajax()能使用的，除dataType外的所有参数;

    }

})

可用参数：

tiptype等 5.3.2+：可以在这里设置初始化可用的所有参数

url：指定表单的提交路径，这里指定的路径会覆盖表单action属性所指定的路径

ajaxpost：表单以ajax提交时，可以在这里配置ajax的参数

ajaxurl：配置实时验证ajax的参数

①、config方法还能为已经初始化过的表单重新配置参数了！5.3.2+

如var demo=$(".formsub").Validform();

demo.config({tiptype:2});

demo下的各表单还能分别配置不同参数！

如demo.eq(0).config({tiptype:1,ajaxPost:true});

demo.eq(1).config({tiptype:1,callback:function(curform){my_method_to_submit_form(); return false;}});

②、执行config可以动态设置、添加参数，如：

demo.config({

    url:"http://validform.rjboy.cn"

});

$(".save").click(function(){

    demo.config({

        ajaxpost:{

            timeout:1000

        }

    });

});

那么在点击save按钮后，demo所对应的表单的config={

    url:"http://validform.rjboy.cn",

    ajaxpost:{

        timeout:1000

    }

}

③、参数url的优先级：form表单的action所指定的提交地址会被config.url覆盖，

config.url会被config.ajaxpost.url覆盖，config.ajaxpost.url会被Validform对象的方法submitForm(flag,url)

和ajaxPost(flag,sync,url)里的url覆盖。

如果表单里没有指定action提交地址，那么就会提交到config.url设定的地址。

考虑到整个验证框架的逻辑，传入dataType参数不会起作用，不会被覆盖，ajax必须返回含有status值的json数据。

④、另外注意的是：传入的success和error方法里，能多获取到一个参数，如：

demo.config={

    ajaxpost:{

    	url:"",

        timeout:1000,

        ...,

        success:function(data,obj){

            //data是返回的json数据;

            //obj是当前表单的jquery对象;

        },

        error:function(data,obj){

            //data是{ status:**, statusText:**, readyState:**, responseText:** };

            //obj是当前表单的jquery对象;

        }

    },

    ajaxurl:{

        success:function(data,obj){

            //data是返回的json数据;

            //obj是当前正做实时验证表单元素的jquery对象;

            //注意：5.3版中，实时验证的返回数据须是含有status值的json数据！

            //跟callback里的ajax返回数据格式统一，建议不再返回字符串"y"或"n"。目前这两种格式的数据都兼容。

        }

    }

}