jquery_validate的使用.docx

模型：$(#inputFormForDescritptions ).validate( ignore: , rules: zhName:remote: url: $ctx/goods/class/checkName, method: post, dataType: json, data: name: function()return $(#zhName).val(); , id: function()return $(#classIdForSub).val(); , messages: zhName:remote: 名称已存在 ,required:中文名称不能为空 ,maxlength:中文名称长度不能大于50 , zhDescription:required: 中文描述信息不能为空 ,maxlength:中文 描述长度不能超过500 , enName:required: 英文名称不能为空 ,maxlength:英文名称长度不能大于50 , enDescription:required: 英文描述信息不能为空 ,maxlength:英文描述长度不能超过500 , submitHandler: function(form) form.submit(); , errorPlacement: function(error, element) error.appendTo($( #descmsg); );页面上的是：名称： 说明：remote对应的是异步交互（验证用户名时候存在），required对应这页面的上的class=“required”，maxlength对应这个页面上的maxlength属性。submitHandler是验证成功后执行的函数。errorPlacement验证失败之后要执行的函数。自定义校验规则：jQuery.validator.addMethod(regex,function(value, element) /扩展方法示例: var exp = new RegExp(/w+$/); return exp.test(value); /value 被验证的input传入的值,登录名只支持数字、字母、下划线 );#定义validate错误显示位置的模式errorPlacement: function(error, element) if($(element).is( select) error.appendTo( element.parent().children(span ).empty().append(error); error.appendTo( element.next(span).append(error);,1. /validate选项*2. $(form).validate(3. 4. debug:true/进行调试模式（表单不提交）5. rules:6. name:required,/自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象7. email:8. /内置验证方式9. required:true,/必填项10. required:#aa:checked表达式的值为真,则必填项11. required:function()返回为真,则必填项12. email:true,/验证电子邮箱格式13. minlength:5,/设置最小长度14. maxlength:10,/设置最大长度15. rangelength:5,10,/设置一个长度范围min,max16. min:2,/设置最小值17. max:8,/设置最大值18. range:2,8/设置值的范围19. url:true,/验证URL格式20. date:true,/验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)21. dateISO:true,/验证ISO类型的日期格式例如：2009-06-2322. dateDE:true,/验证德式的日期格式（29.04.1994or1.1.2006）23. number:true,/验证十进制数字（包括小数的）24. digits:true,/验证整数25. creditcard:true,/验证信用卡号26. accept:/请输入拥有合法后缀名的字符串（上传文件的后缀）27. equalTo:id名/验证两个输入框的内容是否相同28. phoneUS:true/验证美式的电话号码29. regex:/正则表达式/上面addMethod扩展的验证规则30. 31. 32. 33. messages:34. name:Name不能为空,/自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数35. email:36. required:E-mail不能为空,37. email:E-mail地址不正确/validate内置验证有默认的英语提示此处为重新自定义38. 39. 40. 41. errorPlacement:function(error,element)42. element.parents(.form-group).children(.help-block).html(error);/错误显示的位置element验证的元素error错误提示43. 44. 45. submitHandler:function(form)/通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交46. $(form).ajaxSubmit();47. /form.submit();48. 49. 50. success:类名/要验证的元素通过验证后的动作,跟一个字符串,会给输出错误的元素追加一个css类 ，后面也可以跟一个functiontion做处理51. ignore:.ignore/对某些元素不进行验证52. onsubmit:false/是否提交时验证默认:true53. onfocusout:false/是否在获取焦点时验证默认:true54. onkeyup:false/是否在敲击键盘时验证默认:true55. onclick:false/是否在鼠标点击时验证(一般验证checkbox,radiobox)默认:true56. focusInvalid:false/提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点默认:true57. focusCleanup:true/当未通过验证的元素获得焦点时,并移除错误提示（避免和focusInvalid.一起使用）默认:false58. errorClass:类名/指定错误提示的css类名,可以自定义错误提示的样式默认:error59. errorElement:标签/使用什么标签标记错误默认:label60. wrapper:标签/使用什么标签再把上边的errorELement包起来61. errorLabelContainer:容器id/把错误信息统一放在一个容器里面把错误信息统一放在一个容器里面。wrapper：String用什么标签再把上边的errorELement包起来一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏errorContainer: div.error,errorLabelContainer: $(#signupForm div.error),wrapper: li1. showErrors:function(errorMap,errorList)/跟一个函数,可以显示总共有多少个未通过验证的元素2. $(#summary).html(Yourformcontains+this.numberOfInvalids()+errors,seedetailsbelow.);3. this.defaultShowErrors();4. 5. )6. 7. 8. /validate方法返回一个Validator对象,它有很多方法,让你能使用引发校验程序或者改变form的内容*9. 10. $.validator.setDefaults(/设置validator默认11. debug:true,/把调试模式设置为默认如果一个页面中有多个表单一般用这种方式12. errorClass:txt-impt,/设置默认错误提示的css类名13. errorElement:div/设置默认错误提示的标签14. )15. 16. /addMethod(name,method,message)方法：name(自定义rules的key)method(自定义验证方法)message(报错输出的提示)17. jQuery.validator.addMethod(regex,function(value,element,params)/扩展方法示例:18. varexp=newRegExp(params);/paramsrules的value传入的正则表达式19. returnexp.test(value);/value被验证的input传入的值20. ,输入格式有误);21. 22. /扩展rules规则23. jQuery.validator.addClassRules(name,24. required:true,25. minlength:226. );27. jQuery.validator.addClassRules(28. name:29. required:true,30. minlength:231. ,32. zip:33. required:true,34. digits:true,35. 36. );37. $(#myinput).rules(add,38. required:true,39. minlength:2,40. messages:41. required:Requiredinput,42. minlength:jQuery.format(Please,atleast0charactersarenecessary)43. 44. );45. $(#myinput).rules(remove);/全部移除验证规则46. $(#myinput).rules(remove,minmax)/移除minmax47. 48. varform=$(form);49. $(.formBtn).click(function()/按钮type非submitorsubmit按钮不在form内50. console.log(Valid:+form.valid()/form.valid()验证成功返回true51. varvalidator=$(form).validate(setValidate);52. varformState=validator.form();/判断验证状态返回Boolean53. /validator.element(id名)验证某个元素返回Boolean54. /validator.resetForm()把前面验证的FORM恢复到验证前原来的状态55. /*validator.showErrors(56. firstname:IknowthatyourfirstnameisPete,Pete!57. );显示自定义的错误信息*/58. 59. if(formState=false)60. return;61. else62. /dosomeing.63. 64. )65. 66. /使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项后台只允许返回false和true67. remote:check-email.php68. remote:69. url:check-email.php,/后台处理程序70. type:post,/数据发送方式71. dataType:json,/接受数据格式72. data:/要传递的数据73. username:function()74. return$(#username).val();75. 76. 77. 78. 79. 80. /metaString方式*81. 82. /引入js83. 84. 85. 86. /dom上验证规则写法87. 88. 89. /设置为metaString验证方式90. $(#myform).validate(91. meta:validate,92. submitHandler:function()alert(Submitted!) 93. )电话号码和手机的校验：$(document).ready(function() $.validator.addMethod( checkMobile, function(value,element,params) var regexM = /13|5|7|8|0-99$/; var regexT = /(d3,4-)?d7,8$/; return regexM.test(value) | $.trim(value)= | regexT.test(value);,联系方式有误（支持座机或手机号码） );$.validator.addMethod( checkAddress, function(value,element,params) var regex = /0-9a-zA-Zu4E00-u9FA5()*$/; return regex.test(value) | $.trim(value)= ;,公司地址不能含有特殊符号 );$(#companyName).focus();$(#formApplication).validate(submitHandler: function(form)$( #goodsNum).val($( #maxLimit).val();form.submit();,rules:tel: checkMobile: true,address: checkAddress: true,errorPlacement: function(error, element) error.appendTo( element.next(span).append(error););$(#companyName).rules( add, messages: required: ,);$(#contactsName).rules( add, messages: required: ,);$(#tel).rules( add, messages: required: ,);$(#email).rules( add, messages: required: ,);$(#address).rules( add, messages: required:,););在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交，我们可以通过自己编写JavasScript代码来验证，但是有时数据量过多时就会有些难度了。基于jQuery的jquery.validate验证框架帮我们解决了困难，我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持。今天记录的就是用此插件来实现表单验证，效果图：1、获取JS文件：/，这个插件的用法就不再多讲了，如不熟悉或者还没用过的可以通过官网了解也可以搜索jquery validate中文API，此文仅仅记录如何实现上图效果。2、导入JS?123、创建表单?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566用户注册用户名：*真实名：密码：*确认：*邮箱：*电话：地址：证件号：学历：请选择小学中学大专本科学士硕士博士性别：男女保密同意相关条约4、表单初始化样式?123.red color:red;.submit width:80px;inputheight:22px; padding:2px;5、验证代码?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485$(document).ready(function() /设置默认属性$.validator.setDefaults(submitHandler: function(form) form.submit();),/开始验证$(#signupForm).validate(rules: firstname: required: true,stringCheck:true,byteRangeLength:4,15,realname: minlength:5,password: required: true,minlength: 5,confirm_password: required: true,minlength: 5,equalTo: #password,email: required: true,email: true,tel: isMobile: true,address: stringCheck:true,byteRangeLength:4,100,read: required:true,degree: required:true,min:0,idcard: required:true,isIdCardNo:true,/设置提示信息messages:address:stringCheck: 请正确输入您的联系地址,byteRangeLength: 请详实您的联系地址以便于我们联系您,read:required:请先阅读注册条约,degree:min:请选择学历,/设置错误信息存放标签errorElement: em,/指定错误信息位置errorPlacement: function (error, element) if (element.is(:radio) | element.is(:checkbox) var eid = element.attr(name);error.appendTo(element.parent(); else error.appendTo(element.closest(p);,/设置验证触发事件focusInvalid: true,/设置验证成功提示格式success:function(e)e.html( ).addClass(valid).text(ok););到这里表单验证功能就初步完成了，可以试着预览一下效果，点击按钮提交你肯定发现不会进行验证，因为在验证中使用了一些自定义的方法，所以验证失效，那么继续读下去吧，接下来是实现验证的提示信息的个性化和自定义验证方法。6、我们可以知道validate默认的提示信息是英文的，我们可以编写一个jquery.validate.message_cn.js文件来改变它的提示内容并让提示内容显示成中文的：?1234567891011121314151617181920212223242526/定义中文消息var cnmsg = required: 必需填写项,remote: 请修正该字段,email: 请输入正确格式的电子邮件,url: 请输入合法的网址,date: 请输入合法的日期,dateISO: 请输入合法的日期 (ISO).,number: 请输入合法的数字,digits: 只能输入整数,creditcard: 请输入合法的信用卡号,equalTo: 请再次输入相同的值,accept: 请输入拥有合法后缀名的字符串,maxlength: jQuery.format(请输入一个长度最多是 0 的字符串),minlength: jQuery.format(请输入一个长度最少是 0 的字符串),rangelength: jQuery.format(请输入一个长度介于 0 和 1 之间的字符串),range: jQuery.format(请输入一个介于 0 和 1 之间的值),max: jQuery.format(请输入一个最大为 0 的值),min: jQuery.format(请输入一个最小为 0 的值),/自定义验证方法的提示信息stringCheck: 用户名只能包括中文字、英文字母、数字和下划线,byteRangeLength: 用户名必须在4-15个字符之间(一个中文字算2个字符),isIdCardNo: 请正确输入您的身份证号码,;jQuery.extend(jQuery.validator.messages, cnmsg);可以看到此文件中有一个自定义验证方法的提示信息，这些验证方法也是让之前预览没有验证效果的原凶哦，validate插件提供自定义验证方法，继续完善jquery.validate.message_cn.js(自定义验证方法来源于网络)文件：?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374/