jquery.validate使用攻略

目录jquery.validate使用攻略..................................................................................................................2第一章jquery.validate使用攻略............................................................................................2第二章jQuery.validate.jsAPI...................................................................................................8Customselectors...............................................................................................................8Utilities..............................................................................................................................9Validator............................................................................................................................9Listofbuilt-inValidationmethods..................................................................................10validate()的可选项.........................................................................................................12debug：进行调试模式...................................................................................................12第三章自定义jquery-validate的验证行为.........................................................................24第四章自定义错误消息的显示方式...................................................................................26第五章一些常用的验证脚本...............................................................................................29转自使用攻略第一章jquery.validate使用攻略好几年不写JS了，资料整理起来比较慢，格式也有点乱主要分几部分jquery.validate基本用法jquery.validateAPI说明jquery.validate自定义jquery.validate常见类型的验证代码下载地址jquery.validate插件的文档地址插件的主页插件主页上提供的demo验证规则下面是默认校验规则，也可以自定义规则(1)required:true必输字段(2)remote:check.php使用ajax方法调用check.php验证输入值(3)email:true必须输入正确格式的电子邮件(4)url:true必须输入正确格式的网址(5)date:true必须输入正确格式的日期(6)dateISO:true必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22只验证格式，不验证有效性(7)number:true必须输入合法的数字(负数，小数)(8)digits:true必须输入整数(9)creditcard:必须输入合法的信用卡号(10)equalTo:#field输入值必须和#field相同(11)accept:输入拥有合法后缀名的字符串（上传文件的后缀）(12)maxlength:5输入长度最多是5的字符串(汉字算一个字符)(13)minlength:10输入长度最小是10的字符串(汉字算一个字符)(14)rangelength:[5,10]输入长度必须介于5和10之间的字符串)(汉字算一个字符)(15)range:[5,10]输入值必须介于5和10之间(16)max:5输入值不能大于5(17)min:10输入值不能小于10验证提示下面是默认的验证提示，官网有简体中文版的验证提示下载，或者通过jQuery.extend(jQuery.validator.messages自定义错误提示信息，可以将网站的验证提示文本统一到一个文件里。required:Thisfieldisrequired.,remote:Pleasefixthisfield.,email:Pleaseenteravalidemailaddress.,url:PleaseenteravalidURL.,date:Pleaseenteravaliddate.,dateISO:Pleaseenteravaliddate(ISO).,number:Pleaseenteravalidnumber.,digits:Pleaseenteronlydigits,creditcard:Pleaseenteravalidcreditcardnumber.,equalTo:Pleaseenterthesamevalueagain.,accept:Pleaseenteravaluewithavalidextension.,maxlength:$.validator.format(Pleaseenternomorethan{0}characters.),minlength:$.validator.format(Pleaseenteratleast{0}characters.),rangelength:$.validator.format(Pleaseenteravaluebetween{0}and{1}characterslong.),range:$.validator.format(Pleaseenteravaluebetween{0}and{1}.),max:$.validator.format(Pleaseenteravaluelessthanorequalto{0}.),min:$.validator.format(Pleaseenteravaluegreaterthanorequalto{0}.)使用方式1：在控件中使用默认验证规则，例子：电子邮件(必填)inputid=emailclass=requiredemailvalue=email@/2：可以在控件中自定义验证规则，例子：自定义(必填,[3,5])inputid=complexvalue=hiclass={required:true,minlength:3,maxlength:5,messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}/3:通过javascript自定义验证规则，下面的JS自定义了两个规则，password和confirm_password$().ready(function(){$(#form2).validate({rules:{password:{required:true,minlength:5},confirm_password:{required:true,minlength:5,equalTo:#password}},messages:{password:{required:没有填写密码,minlength:jQuery.format(密码不能小于{0}个字符)},confirm_password:{required:没有确认密码,minlength:确认密码不能小于{0}个字符,equalTo:两次输入密码不一致嘛}}});});required除了设置为true/false之外，还可以使用表达式或者函数，比如$(#form2).validate({rules:{funcvalidate:{required:function(){return$(#password).val()!=;}}},messages:{funcvalidate:{required:有密码的情况下必填}}});Html密码inputid=passwordname=passwordtype=password/确认密码inputid=confirm_passwordname=confirm_passwordtype=password/条件验证inputid=funcvalidatename=funcvalidatevalue=/4：使用meta自定义验证信息首先用JS设置meta$(#form3).validate({meta:validate});Htmlemailinputclass={validate:{required:true,email:true,messages:{required:'输入email地址',email:'你输入的不是有效的邮件地址'}}}/5:使用meta可以将验证规则写在自定义的标签内，比如validateJS设置meta$().ready(function(){$.metadata.setType(attr,validate);$(#form1).validate();});HtmlEmailinputid=emailname=emailvalidate={required:true,email:true,messages:{required:'输入email地址',email:'你输入的不是有效的邮件地址'}}/6:自定义验证规则对于复杂的验证，可以通过jQuery.validator.addMethod添加自定义的验证规则官网提供的additional-methods.js里包含一些常用的验证方式，比如lettersonly，ziprange，nowhitespace等例子//字符验证jQuery.validator.addMethod(userName,function(value,element){returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value);},用户名只能包括中文字、英文字母、数字和下划线);//然后就可以使用这个规则了$(#f