jquery.validate 自定义验证方法

合集下载

validate详解

},
psw1:{
required:true,
equalTo:"#psw",
},
mail:{
required:true,
email:true
},
tel:{
number:true,
isMobile:true,
});
<input id="firstname" name="firstname" class="required" />
<input id="email" name="email" class="required email" />
<input id="password" name="password" type="password" class="{ required :true, minlength :5}" />
},
psw:{
required:"密码不能为空",
rangelength:jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
},
psw1:{
required:"确认密码不能为空",
如果需要修改错误提示信息:class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
2.2将校验规则写到 js 代码中:

jquery validate动态添加和删除校验规则

jquery validate动态添加和删除校验规则随着jQuery的使用越来越广泛，jquery validate在前端表单校验中也变得越来越重要。

在使用jquery validate时，我们需要为表单的每个元素添加校验规则。

但有时候我们需要动态地添加或删除校验规则。

本文将围绕“jquery validate动态添加和删除校验规则”进行讲解。

1.获取validate对象在开始动态添加或删除校验规则前，我们需要先获取到该表单的validate对象。

可以通过以下代码获取：```javascriptvar validate = $("#form").validate();```其中，#form为表单的id。

2.动态添加校验规则当我们需要动态添加校验规则时，可以使用addMethod方法。

该方法用于添加自定义校验规则。

以下是方法的基本用法：```javascript$.validator.addMethod(name, method, message)```方法的参数说明如下：- name: 校验方法的名称，用于标识该校验方法；- method: 校验方法的处理函数，函数参数为当前元素的value值，函数返回true表示校验通过，false表示校验不通过；- message: 校验不通过时的错误提示信息。

具体可以参考下方代码：```javascript//新建一个校验规则$.validator.addMethod('chinese', function(value, element) {var chineseReg = /^[\u4e00-\u9fa5]+$/;return this.optional(element) || (chineseReg.test(value)); }, '只能输入中文字符！');//动态添加校验规则validate.rules['name'] = {required: true,chinese: true,minlength: 2,maxlength: 20};```以上代码中，我们定义了一个名为“chinese”的校验规则，用于判断输入的值是否为中文字符。

validator校验用法

validator校验用法validator校验用法是指在web开发中使用validator插件对表单数据进行校验的方法。

validator插件是一款轻量级的表单验证插件，可以对表单中的数据进行实时的、全面的校验，并在校验失败时向用户提供友好的提示信息。

使用validator插件进行表单校验的方法如下：1. 引入validator插件。

可以从官网下载相关的js和css文件，也可以使用CDN链接进行引入。

2. 为表单添加验证规则。

在表单元素中添加data-rule属性来指定验证规则，例如：<input type='text' name='username' placeholder='用户名' data-rule='required|minlength:6|maxlength:20' />上述代码中，data-rule属性指定了验证规则，该规则表示用户名不能为空，长度不能少于6个字符，不能超过20个字符。

3. 在表单提交时进行校验。

可以使用validator插件提供的validate()方法来进行表单校验，例如：$('form').validate({rules: {userna {required: true,minlength: 6,maxlength: 20}},messages: {userna {required: '用户名不能为空',minlength: '用户名长度不能少于6个字符',maxlength: '用户名长度不能超过20个字符'}}});上述代码中，使用validate()方法对表单进行校验，其中rules 属性指定了验证规则，messages属性指定了校验失败时的提示信息。

通过以上三个步骤，就可以使用validator插件对表单数据进行全面的、实时的校验，并为用户提供友好的提示信息。

jquery validate和validform验证插件的对比

此文在jquery的验证插件（下文以jquery代替）和validform验证插件之间作如下对比：1、样式2、普通验证：3、自定义验证：4、Ajax验证：一、样式1、Jquery（可自定义提示信息样式，下图摘自官方文档）：2、Validform（提供七种内置方案并支持自定义，以下为七种内置的较常用的三种）：二、普通验证1、Jquery：Jquery支持两种方式验证：1、直接将规则绑定到元素上。

2、将规则写在初始化js 中1、直接将规则绑定到元素上。

<form class="cmxform" id="form2" method="get" action=""><fieldset><legend>验证一个完整的表单</legend><p><label for="email">Email</label><input id="email" name="email" required type="email"></p><p><label for="agree">喜欢的颜色</label><select id="color" name="color" title="请选择您喜欢的颜色！" required><option></option><option>红色</option><option>蓝色</option><option>黄色</option></select></p><p><label for="phone">电话</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"> </p><p><label for="address">地址</label><input id="address" name="address" required minlength="3"></p><p><label for="avatar">头像</label><input type="file" id="avatar" name="avatar" required></p><p><label for="agree">请同意我们的条款</label><input type="checkbox" class="checkbox" id="agree" title="请同意我们的条款！" name="agree" required></p><p><input class="submit" type="submit" value="提交"/><input class="cancel" type="submit" value="取消"/></p></fieldset></form>2、将规则下载初始化js中$().ready(function() {$("#signupForm").validate({rules: {firstname: "required",email: {required: true,email: true},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {firstname: "请输入姓名",email: {required: "请输入Email地址",email: "请输入正确的email地址"},password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字符")},confirm_password: {required: "请输入确认密码",minlength: "确认密码不能小于5个字符",equalTo: "两次输入密码不一致不一致"}}});});2、Validform：Validform也支持两种：1、直接将规则绑定到元素上。

jqueryvalidate自定义验证方法日期验证

jqueryvalidate自定义验证方法日期验证在jqueryvalidate中，可以使用自定义验证方法来实现日期验证。

具体的实现步骤如下：1. 首先，在html页面中引入jquery库和jqueryvalidate插件。

确保在引入jqueryvalidate插件之前引入jquery库。

```html```2. 接下来，在表单中的日期字段设置一个合适的id属性，例如`id="dob"`：```html<form id="myForm"><label for="dob">Date of Birth:</label><input type="date" id="dob" name="dob" required><button type="submit">Submit</button></form>```3. 然后，在JavaScript代码中定义一个自定义验证方法来验证日期格式。

在这个方法中，可以使用正则表达式来匹配日期的格式，例如`yyyy-mm-dd`。

如果格式不匹配，则返回`false`，否则返回`true`。

```javascript$.validator.addMethod("dateformat", function (value, element) var dateRegex = /^(19，20)\d\d-(0\d，1[012])-(0\d，1\d，2[0-9]，3[01])$/;return this.optional(element) ， dateRegex.test(value);}, "Please enter a valid date format (yyyy-mm-dd)");```4. 最后，使用validate方法来初始化表单验证，并添加自定义验证方法到`rules`对象中：```javascript$(document).ready(function$('#myForm').validaterules:dob:required: true,dateformat: true}},messages:dob:required: "Date of Birth is required"}},submitHandler: function (form)//表单验证通过form.submit(;}});});```在上面的代码中，`rules`对象用于指定`dob`字段需要应用自定义验证方法，并且该字段是必填的。

jqueryvalidate自定义验证方法日期验证

jqueryvalidate⾃定义验证⽅法⽇期验证jquery validate有很多验证规则，但是更多的时候，需要根据特定的情况进⾏⾃定义验证规则。

这⾥就来聊⼀聊jquery validate的⾃定义验证。

jquery validate有⼀个⽅法，可以让⽤户来⾃定义验证规则。

案例⼀：//⾃定义验证$.validator.addMethod("isPositive",function(value,element){var score = /^[0-9]*$/;return this.optional(element) || (score.test(value));},"<font color='#E47068'>请输⼊⼤于0的数字</font>");通过addMethod⽤户可以⾃定义⾃⼰的验证规则这个⽅法有三个参数，第⼀个参数表⽰验证规则名称，这⾥是isPositive，表⽰是否为正数。

第⼆个参数是真正的验证主体，它是⼀个函数，函数的第⼀个value表⽰调⽤这个验证规则的表单的值，第⼆个element可以⽤来判断是否为空，为空的时候，就不调⽤这个验证规则了。

第三个参数是返回的错误提⽰。

具体如何使⽤呢？其实跟jquery validate固有的验证规则使⽤是⼀样的。

<tr bgcolor="#f7f7f7" height="43" align="right"><td class="font14_s pdr_12 grey_70">总分:</td><td class="font14_s pl40" align="left"><input type="text" id="fullscore" name="fullscore" style=" margin-left: 10px; margin-right: 2px;" value="" class="required number isPositive </tr>如上所⽰，加粗的地⽅就是使⽤的⽅法，⼀共⽤了三个验证规则，⼀个是必须，⼀个是数字，⼀个是⾃定义验证规则。

jquery.validate.js的Validate表单验证

jquery.validate.js的Validate表单验证validate⼀、 validate的使⽤步骤1. 引⼊jquery.min.js2. 引⼊ jquery.validate.js3. 页⾯加载后对表单进⾏验证 $("#表单id名").validate({}）4. 在validate中的rules中编写验证规则（格式如下）字段的name属性:“校验器”（tisps:⼀个输⼊框只有⼀个校验器的时候使⽤）字段的name属性:{校验器:值,校验器:值}(tips:输⼊框需要有多个校验器的时候使⽤)5. 在validate中的messages中编写提⽰信息(tips格式与rules相对应)6. 在validate中的submitHandler中编写验证通过执⾏的内容图⽰如下：案例代码如下<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript" src="scripts/common/jquery.min.js"></script><script type="text/javascript" src="scripts/common/jquery.validate.js"></script<script type="text/javascript">$("#zhuce").validate({rules:{regist_username:{required:true/* remote:{type: "post",url: url,data:{userName:function () {return $("regist_username").val();}}}⽤ajax判断数据库中⽤户名是否存在*/},regist_password:{required:true,minlength:6},final_password:{equalTo:"#regist_password"}},messages:{regist_username:{required:"⽤户名不能为空"},regist_password:{required:"密码不能为空",minlength:"密码最⼩的长度为6"},final_password:{equalTo:"两次密码不⼀致"}},submitHandler: function () {//验证通过后进⾏注册register();}})</script></head><body><form id="zhuce"><dl><dt><div class='header'><h3>注 册</h3></div></dt><dt></dt><dt><div class='letter'><label for="regist_username">⽤户名: </label><input type="text" name="regist_username" id="regist_username" tabindex='5'/></div></dt><dt><div class='letter'>昵   称: <input type="text" name="nickname" id="nickname" tabindex='6'/></div></dt><dt><div class='letter'><label for="regist_password"> 密   码: </label><input type="password" name="regist_password" id="regist_password" tabindex='7'/></div></dt><dt><div class='password'><label for="final_password">   确认密码: </label><input type="password" name="final_password" id="final_password" tabindex='8'/></div></dt><dt><div><input type="submit" name="" id="regist_button" value='&nbsp注&nbsp册&nbsp' tabindex='9'/> <input type="button" name="" id="back" value='&nbsp返&nbsp回&nbsp' tabindex='10'/></div></dt></dl></form></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182默认校验规则序号校验类型取值描述1required true&false必须填写的字段2email“@”&“email”必须输⼊正确格式的电⼦邮件3remote url路径使⽤ajax进⾏验证4date数字正确格式⽇期 tips:ie6有bug5dateISO字符串正确格式的⽇期例如：2018-11-28，2018/11/28 tips:只验证格式，不验证有效性6number true&false合法的数字7digits true&false整数8creditcard true&false合法的信⽤卡号9equalTo JQuery表达式（eg:"#regist_password"）输⼊值必须和 #regist_password相同。

jquery.validate动态更改校验规则

jquery.validate动态更改校验规则有时候表单中有多个字段是相互关联的，以下遇到的就是证件类型和证件号码的关联，在下拉框中选择不同的证件类型，证件号码的值的格式都是不同的，这就需要动态的改变校验规则。

点击(此处)折叠或打开1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">2. <html>3. <head>4. <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">5. <script src="jquery-1.7.2.js"type="text/javascript"></script>6. <script src="jquery.validate.js"type="text/javascript"></script>7. <script src="validate.addmethod.js"type="text/javascript"></script>8. <script src="messages_zh.js"type="text/javascript"></script>9. <script type="text/javascript">10.11. //===================放在validate.addmethod.js中=========================12.13. //检查号码是否符合规范，包括长度，类型14. isCardNo = function(card)15. {16. //⾝份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后⼀位是校验位，可能为数字或字符X17. var reg=/(^\d{15}$)|(^\d{17}(\d|X)$)/;18. if(reg.test(card)=== false)19. {20. return false;21. }22. return true;23. };24.25. //取⾝份证前两位,校验省份26. checkProvince = function(card)27. {28. var province = card.substr(0,2);29. if(vcity[province]== undefined)30. {31. return false;32. }33. return true;34. };35.36. //检查⽣⽇是否正确37. checkBirthday = function(card)38. {39. var len = card.length;40. //⾝份证15位时，次序为省（3位）市（3位）年（2位）⽉（2位）⽇（2位）校验位（3位），皆为数字41. if(len =='15')42. {43. var re_fifteen =/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;44. var arr_data = card.match(re_fifteen);45. var year = arr_data[2];46. var month = arr_data[3];47. var day = arr_data[4];48. var birthday = new Date('19'+year+'/'+month+'/'+day);49. return verifyBirthday('19'+year,month,day,birthday);50. }51. //⾝份证18位时，次序为省（3位）市（3位）年（4位）⽉（2位）⽇（2位）校验位（4位），校验位末尾可能为X52. if(len =='18')53. {54. var re_eighteen =/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;55. var arr_data = card.match(re_eighteen);56. var year = arr_data[2];57. var month = arr_data[3];58. var day = arr_data[4];59. var birthday = new Date(year+'/'+month+'/'+day);60. return verifyBirthday(year,month,day,birthday);61. }62. return false;63. };64.65. //校验⽇期66. verifyBirthday = function(year,month,day,birthday)67. {68. var now = new Date();69. var now_year = now.getFullYear();70. //年⽉⽇是否合理71. if(birthday.getFullYear()== year &&(birthday.getMonth()+ 1)== month && birthday.getDate()== day)72. {73. //判断年份的范围（3岁到100岁之间)74. var time = now_year - year;75. if(time >= 3 && time <= 100)76. {77. return true;78. }79. return false;80. }81. return false;82. };83. //校验位的检测84. checkParity = function(card)85. {86. //15位转18位87. card = changeFivteenToEighteen(card);88. var len = card.length;89. if(len =='18')90. {91. var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);92. var arrCh = new Array('1','0','X','9','8','7','6','5','4','3','2');93. var cardTemp = 0,i, valnum;94. for(i= 0;i< 17;i++)95. {96. cardTemp += card.substr(i, 1)* arrInt[i];97. }98. valnum = arrCh[cardTemp % 11];99. if (valnum == card.substr(17, 1))100. {101. return true;102. }103. return false;104. }105. return false;106. };107. //15位转18位⾝份证号108. changeFivteenToEighteen = function(card)109. {110. if(card.length =='15')111. {112. var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);113. var arrCh = new Array('1','0','X','9','8','7','6','5','4','3','2');114. var cardTemp = 0,i;115. card = card.substr(0, 6)+'19'+ card.substr(6, card.length - 6);116. for(i= 0;i< 17;i++)117. {118. cardTemp += card.substr(i, 1)* arrInt[i];119. }120. card += arrCh[cardTemp % 11];121. return card;122. }123. return card;124. };125. isIdCardNo = function(card)126. {127. //是否为空128. if(card ==='')129. {130. return false;131. }132. //校验长度，类型133. if(isCardNo(card)=== false)134. {135. return false;136. }137. //检查省份138. if(checkProvince(card)=== false)139. {140. return false;141. }142. //校验⽣⽇143. if(checkBirthday(card)=== false)144. {145. return false;146. }147. //检验位的检测148. if(checkParity(card)=== false)149. {150. return false;151. }152. return true;153. };154. //⾝份证号码验证155. jQuery.validator.addMethod("isIdCardNo", function(value, element){156. return this.optional(element)|| isIdCardNo(value);157. },"请正确输⼊您的⾝份证号码");158. //护照号格式验证159. jQuery.validator.addMethod("isPassport", function(value,element){160. var passport ="/(P/d{7})|(G/d{8})/";161. return this.optional(element)||(passport.test(value));162. },"请正确填写您的护照号");163. //===================放在validate.addmethod.js中END=========================164. $(document).ready(function(){165. $("#ctc_form").validate({166. ignore: "",//开启hidden验证， 1.9版本后默认关闭167. rules:{168. "qq":{169. required: true,170. //minlength: 2171. stringCheck:true172. }173. }174. });175. $("#papersType").change( function(){176. var type= $("#papersType").find("option:selected").text();177. if(type=="⾝份证"){178. $("#papersCode").rules("remove");179. $("#papersCode").rules("add",{ required: true,isIdCardNo: true, messages: { required: "请正确输⼊您的⾝份证号码"}}); 180. }else if(type=="军官证"){181. $("#papersCode").rules("remove");182. $("#papersCode").rules("add",{ required: true,stringCheck:true,minlength:6,maxlength:8, messages: { required: "请输⼊正确的军官证号"}});183. }else if(type=="护照"){184. $("#papersCode").rules("remove");185. $("#papersCode").rules("add",{ required: true,isPassport:true, messages: { required: "请正确填写您的护照号"}});186. }else if(type=="机动车驾驶证"){187. $("#papersCode").rules("remove");188. $("#papersCode").rules("add",{ required: true,stringCheck:true, messages: { required: "机动车驾驶证是必填"}});189. }else{190. $("#papersCode").rules("remove");191. $("#papersCode").rules("add",{ required: true,stringCheck:true, messages: { required: "必填"}});192. }193. });194. });195. </script>196. <title></title>197. </head>198. <body>199. <div class="m_right">200. <form id="ctc_form"method="post"action="">201. <table width="700"border="0"cellspacing="0"cellpadding="0"align="center"style="border-collapse: collapse;border-spacing: 0; border:0;margin:0px auto;">202. <tr>203. <td width="90"class="m_r_s_con_td"><span class="required_mark">*</span>证件类型</td>204. <td width="275"class="m_r_s_con_text"><label for="select"></label>205. <select name="papersType"id="papersType">206. <option value="0">请选择</option207. <option value="1">⾝份证</option>208. <option value="2">军官证</option>209. <option value="3">护照</option>210. <option value="4">机动车驾驶证</option>211. <option value="5">其他</option>212. </select></td>213. <td class="m_r_s_con_text"></td>214. </tr>215. <tr>216. <td width="90"class="m_r_s_con_td"><span class="required_mark">*</span>证件证号</td>217. <td width="275"class="m_r_s_con_text"> 218. <input name="papersCode"id="papersCode"/>219. </td>220. <td class="m_r_s_con_text"></td>221. </tr>222. <tr>223. <td width="90"class="m_r_s_con_td"><span class="required_mark">*</span>QQ </td>224. <td width="275"class="m_r_s_con_text"> 225. <input name="qq"id="qq"/>226. </td>227. <td class="m_r_s_con_text"></td>228. </tr>229. </table>230. <input type="submit"value="添加"/>231. </form>232. </div>233. </body>234. </html>。

jqueryvalidate表单验证（动态字段验证）

jqueryvalidate表单验证（动态字段验证）formValidate.js内容如下：formValidation:function(fields){ var rules = new Object(); var messages = new Object(); for(let i=0,len=fields.length;i<len;i++){ var obj = new Object(); var msg = new Object(); if(fields[i].required){ obj.required = true; msg.required = fields[i].displayname + "不能为空"; } //其他验证可以同上操作　 var name = fields[i].name; rules[name] = obj; messages[name] = msg; } $("#form").validate({ rules:rules, messages:messages, debug:false, errorClass:"validError", errorPlacement:function(error,element){ //针对select选择框，追加字段验证错误提⽰信息 if(element.is("select")){ //获取元素的name属性 var eid = element.attr("name"); //将错误信息添加到当前元素的⽗节点后⾯ error.appendTo(element.parent("div")); } else { error.insertAfter(element); } } });}动态字段添加字段验证：//id为动态字段id$("#id").rules("add",{required:true, messages:{ required:id不能为空, }});删除动态添加的字段验证：//id为动态添加的字段id$("#id").rules("remove");。

validation-jQuery的validation表单验证插件

Validation-jQuery表单验证插件使用方法作用jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持。

使用前的布置说明：需要JQuery版本：1.2.6+步骤：要导入相应的jQuery.js与jquery.validate.js文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.validate.js" type="text/javascript"></script>在相应的字段上指定验证规则名称*<input type="text" name="loginName" class="required">其中class="required"代表本字段必须要输入数据指定要对表单进行验证<script type="text/javascript">$(function(){$("#testForm").validate();});</script>效果如下图：基础知识指定验证规则的方式把验证规则写到字段元素的class属性中例：名称* <input type="text" name="loginName" class="required"><br>密* <input type="password" name="password" class="required"><br> 再次输入<input type="password" name="password2"class="{equalTo: '[name=password]'} required"><br> 生日<input type="text" name="birthday" class="dateISO"><br>E-mail *<input type="text" name="email" class="email"><br>PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">说明：如果使用class="{key:value,…}"的方式，必须引入：jquery.metadata.js表单字段的name不能重复，否则所配置的验证不起作用。

jquery中validator的用法

jquery中validator的用法1.引言1.1 概述概述部分的内容可以包括以下内容：jQuery中的Validator是一个强大的表单验证插件，它可以帮助开发者对用户输入的表单数据进行有效的验证和过滤。

通过使用Validator，开发者可以轻松地验证用户输入的数据是否符合预期的格式和规则，从而提高应用程序的可靠性和安全性。

Validator的核心理念是基于规则和验证器，开发者可以定义各种验证规则，并将其应用到表单字段上。

当用户提交表单时，Validator会自动触发验证规则，并根据规则中定义的条件和要求对用户输入的数据进行验证。

如果输入数据符合规则要求，Validator将返回验证通过的结果，否则将返回相应的错误信息。

除了基本的验证功能，Validator还提供了丰富的扩展功能，如自定义错误消息、条件验证、异步验证等。

开发者可以根据实际需求进行配置和定制，使其更适应各种复杂的业务场景。

在使用Validator时，开发者只需简单地引入相应的脚本文件，并通过一些简单的代码片段即可实现表单的验证功能。

Validator提供了一系列方便的API和方法，可以帮助开发者更加灵活地控制和管理验证过程。

总之，通过使用jQuery中的Validator，开发者可以轻松地实现表单验证，并有效地提高应用程序的可靠性和用户体验。

在接下来的文章中，我们将详细介绍Validator的常用方法和用法，以及其优势和局限性。

文章结构部分应该介绍本文的整体结构和各个部分的内容概要。

可以按照以下方式编写1.2 文章结构的内容：1.2 文章结构本文分为引言、正文和结论三个部分。

引言部分主要介绍了本文的概述、文章结构和目的。

在概述中，简要介绍了将要讨论的主题——jquery中Validator的用法。

接下来，讲解了本文的文章结构，包括引言、正文和结论三个部分。

最后，明确了本文的目的，即介绍jquery中Validator的基本概念、常用方法和用法，以及讨论其优势和局限性。

jquery.validate.js表单验证jquery.validate.js的用法

jquery.validate.js表单验证jquery.validate.js的⽤法jquery.validate.js这个插件已经⽤了2年多了，是⼀个不可多得的表单验证最⽅便快捷的插件。

基于jquery的⼩插件，基本⼩⽩⼀学就会上⼿，对于项⽬表单页⾯⽐较多，元素⽐较多的校验，该插件基本分分钟就解决完。

本来想好好总结⼀下的。

暂放demo。

想参考⼀下这篇楼主的博⽂。

感觉总结的太好了！他的⽤法是结合jquery.validate.js写法基本是这个样⼦的class={};前端写法⽆限多，这⾥就不细细区别那种⽤法更好，没那精⼒。

其实引⽤这个写法的主要原因是他的写法会帮助我们动态校验⾃动⽣成的表格元素，总所周知啊：jquery.validate.js这个插件是基于表单的name名称进⾏校验的，⽽对于动态⽣成的表单这个name就有点困难困难了。

（除⾮你们想到name[i],i++这种低级想法。

因为后端基本不会给name起name1,name2,name3这种名字的，哪家也不这么在数据库⾥玩。

除⾮⾃⼰本地的同学们，哈哈哈！）废话少说。

这⾥就显出jquery.metadata.js他的⾼尚之品质！以下是我项⽬中的⼀个⼩代码$(".add).on("click",function(){var str='<tr class="trsec">'+'<td><select name="assessVoList[][productMetadataId]" id="" class="risk">'+options+'</select></td>'+'<td><select name="assessVoList[][LossTargetName]" class="subject">'+LossTargetNameid+'</select></td>'+'<td><select name="assessVoList[][LossTargetType]" class="sslb">'+lossFeeTypeListid+'</select></td>'+'<td><input type="text" value="'+item.losshow+'" placeholder="损失程度" name="assessVoList[][losshow]" class="losshow {required:true}"/></td>'+'<td><a class="sbtn delete deleteone" data-toggle="modal" data-target=".mydelete">删除</a></td>'+'</tr>';$(".two").find("tbody").append(str);})点击按钮，给表格动态增加⼀条数据时，对表单⾥的元素进⾏校验。

jQuery的validator验证，以及添加自定义验证规则。

jQuery的validator验证，以及添加⾃定义验证规则。

jquery表单验证插件（jquery.validate.js）的3种使用方式

jquery表单验证插件（jquery.validate.js）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：第⼀种⽅式：也是⽐较标准的⽅式：⾸先引⼊jquery 插件和 jquery 验证插件：第⼀步：引⼊插件复制代码代码如下:<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script>第⼆步：定义表单的错误输出：复制代码代码如下:<style type="text/css">#frm label.error {color: Red;}</style>第三步：添加错误处理⽅法；jquery验证，需要有：1：定义验证⽅法2：添加验证规则下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。

先看效果图：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World");});$( "#frm" ).validate({rules: {username: {required: true,minlength: 4,maxlength: 20,byteMaxLength:20,valiEnglish:true},postcode: {postcodeVal:true},number: {byteMaxLength:5,numFormat:5},identifier: {sfzhValidate:true}},messages: {username: {required: "请输⼊⽤户名4--20个英⽂字符",minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")},number: {numFormat: $.format("请输⼊{0}数字")}}});jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod("numFormat",function(value,element,param){return this.optional(element) || /^\d*$/.test(value);}//,$.validator.format("请输⼊数字{0}位以内"));//number(9,3)jQuery.validator.addMethod("numFormat63",function(value,element){return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);},$.validator.format("请输⼊合法数字,精度格式123456.0"));jQuery.validator.addMethod("postcodeVal",function(value,element){return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);},$.validator.format("请输⼊合法的邮编"));jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);},$.validator.format("请输⼊字母或数字"));jQuery.validator.addMethod("sfzhValidate",function(value,element){return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);},$.validator.format("请输⼊合法⾝份证号"));jQuery.validator.addMethod("valiEnglish",function(value,element){return this.optional(element) || /^[a-zA-Z ]*$/.test(value);},$.validator.format("请输⼊字母或者空格"));});</script><body><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号：<input type="text" name="identifier" id="identifier" /></label> <label><input type="button" name="clickme" id="clickme" value="click me" /></label></p></form></body></html>这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以下⾯讲解其中的重点⽅法：jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod() ⽅法，有三个参数,第⼀个参数： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。

JqueryValidate默认校验规则及常用的自定义验证规则

JqueryValidate默认校验规则及常⽤的⾃定义验证规则Jquery Validate 相关参数及常⽤的⾃定义验证规则⼆、默认校验规则(1)、required:true 必输字段(2)、remote:"remote-valid.jsp" 使⽤ajax⽅法调⽤remote-valid.jsp验证输⼊值(3)、email:true 必须输⼊正确格式的电⼦邮件(4)、url:true 必须输⼊正确格式的⽹址(5)、date:true 必须输⼊正确格式的⽇期，⽇期校验ie6出错，慎⽤(6)、dateISO:true 必须输⼊正确格式的⽇期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)、number:true 必须输⼊合法的数字(负数，⼩数)(8)、digits:true 必须输⼊整数(9)、creditcard:true 必须输⼊合法的信⽤卡号(10)、equalTo:"#password" 输⼊值必须和#password相同(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三、默认的提⽰messages: {required: "This field is required.",remote: "Please fix this field.",email: "Please enter a valid email address.",url: "Please enter a valid URL.",date: "Please enter a valid date.",dateISO: "Please enter a valid date (ISO).",dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",number: "Please enter a valid number.",numberDE: "Bitte geben Sie eine Nummer ein.",digits: "Please enter only digits",creditcard: "Please enter a valid credit card number.",equalTo: "Please enter the same value again.",accept: "Please enter a value with a valid extension.",maxlength: $.validator.format("Please enter no more than {0} characters."),minlength: $.validator.format("Please enter at least {0} characters."),rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),range: $.validator.format("Please enter a value between {0} and {1}."),max: $.validator.format("Please enter a value less than or equal to {0}."),min: $.validator.format("Please enter a value greater than or equal to {0}.")},四、Jquery Validate ⾃定义验证规则addMethod(name,method,message)⽅法参数 name 是添加的⽅法的名字。

jQueryValidate表单验证插件----Validate简介，官方文档，官方下载地址

jQueryValidate表单验证插件----Validate简介，官⽅⽂档，官⽅下载地址⼀、 jQuery Validate 插件的介绍jQuery Validate 插件为表单提供了强⼤的验证功能，让客户端表单验证变得更简单，同时提供了⼤量的定制选项，满⾜应⽤程序各种需求。

该插件捆绑了⼀套有⽤的验证⽅法，包括 URL 和电⼦邮件验证，同时提供了⼀个⽤来编写⽤户⾃定义⽅法的 API。

所有的捆绑⽅法默认使⽤英语作为错误信息，且已翻译成其他 37 种语⾔。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的⼀名成员，是 jQuery UI 团队的主要开发⼈员，是 QUnit 的维护⼈员。

最常使⽤JavaScript的场合就是表单的验证，⽽jQuery作为⼀个优秀的JavaScript库，也提供了⼀个优秀的表单验证插件----Validation。

Validation是历史最悠久的jQuery插件之⼀，经过了全球范围内不同项⽬的验证，并得到了许多Web开发者的好评。

官⽅⽹站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/在线⽂档：/Plugins/Validation在线 API：http://jquery.bassistance.de/api-browser/plugins.html配置说明:/Plugins/Validation/validate#options项⽬介绍：/project/validateGithub：https:///jzaefferer/jquery-validation⼆、jQuery Validate 拥有的特点介绍作为⼀个标准的验证⽅法库，jQuery Validate 拥有以下的特点：（1）内置验证规则。

拥有必填、数字、Email、URL和信⽤卡号码等19类内置验证规则。

使用jquery.validate自定义方法实现手机号码或者固话至少填写一个的逻辑验证

使⽤jquery.validate⾃定义⽅法实现⼿机号码或者固话⾄少填写⼀个的逻辑验证最近项⽬开发中遇到这样的需求“⼿机号码或者固话⾄少填写⼀个”，如下图所⽰:项⽬采⽤的jquery.validate.js验证组件，⽬前组件不⽀持这种“或”逻辑的验证，于是就⾃⼰定义⼀个jQuery.validator.addMethod("phone", function(value, element) {var mobile = $("#mobile").val();// ⼿机号码var telephone = $("#telephone").val();// 固定电话var mobileRule = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0-9]|170)\d{8}$/;var telephoneRule = /^\d{3,4}-?\d{7,9}$/;// 都没填if (isEmpty(mobile) && isEmpty(telephone)) {//⾃定义错误提⽰$("#receivingMobile_tip").addClass("errorHint").text("请填写固定电话或⼿机号码");return false;}var mobilePass = false;var telephonePass = false;// ⼿机填了、固定电话没填if (!isEmpty(mobile) && isEmpty(telephone)) {if (!mobileRule.test(mobile)) {//⾃定义错误提⽰$("#receivingMobilePhone_tip").removeClass("successHint").addClass("errorHint").text("⼿机号码格式不对");return false;} else {mobilePass = true;}}// ⼿机没填、固定电话填了if (isEmpty(mobile) && !isEmpty(telephone)) {if (!telephoneRule.test(telephone)) {//⾃定义错误提⽰$("#receivingTelephone_tip").removeClass("successHint").addClass("errorHint").text("固定电话格式不对");return false;} else {telephonePass = true;}}if (mobilePass || telephonePass) {//⾃定义成功提⽰$("#receivingTelephone_tip").removeClass("errorHint").addClass("successHint").text('');return true;} else {return false;}}, "ignore");补充isEmpty函数：// 空字符串判断function isEmpty(v, allowBlank) {return v === null || v === undefined || (!allowBlank ? v === "" : false);}处理validate的errorPlacement：errorPlacement : function(error, element) {//忽略⾃定义的⽅法错误提⽰if (error.text() == "ignore") {return;} }在rules⾥⾯使⽤rules : {telephone : { phone : []},mobile : {phone : []}}。

JqueryValidate动态添加和删除校验规则

首先不管这个验证是不是需要取消，我们在初始化的时候都给它加上。当用户进行了某个操作后，需要取消这个校验规则：
1 $(“#username”).rules(“remove”,”number”);
当用户进行了某个操作后，需要加上这个校验规则：
1 $(“#username”).rules(“add”,{number:true});
这是第一次用，做个总结，有不对的地方请留言，非常感谢！
unexpectedendofjsoninput请尝试刷新页面或更换浏览器重试
JqueryValidate动态添加和删除校验规则
以下面文本框为例，
<input type=”text”name=”username” id=”username”/s里面应该设置 username:number，但是当用户进行某个操作后，我们又不需要这个校验规则了，具体的实现如下：

jQueryValidate自定义金钱验证,是否为金额格式,保留两位小数,并支持千分制货币格式

//提示 isMoney:"请输入正确的金额,只允许两位数",也可以在校验里面自定义提示文字
此时输入: 123,123,456.00 也是可以的,保存的时候需要转一下数字,把逗号去掉即可,保证编辑的时候显示的是货币格式校验也可以通过 jQuery Validate,非常强大,开发时可以省很大的功夫,但有时候仍不满足业务需求,这个时候就需要自定义啦
请求出错错误代码400请尝试刷新页面重试
jQueryValidate自定义金钱验证 ,是否为金额格式 ,保留两位小数 , 并支持千分制货币格式
//自定义函数实现 isMoney: function (value, element){
// return this.optional(element) || /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value); //金额,不允许货币格式 //允许, 货币格式 return this.optional(element) || /^([1-9]{1}[0-9]{0,3}(\,[0-9]{3,4})*(\.[0-9]{0,2})?|[1-9]{1}\d*(\.[0-9]{0,2})?|0(\.[0-9]{0,2})?|(\.[0-9]{1,2})?)$/.test(value); },

validate表单验证

jQuery 表单验证插件——Validation(基础)(2011-04-23 15:10:21)转载▼分类：javascript标签：杂谈jQuery 表单验证插件——ValidationValidation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:内置的验证规则，如：必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则可以自定义验证规则：可以很方便地自定义验证规则简单而且强大的验证信息提示：没人了验证信息提示，并提供自定义覆盖默认提示信息功能实时进行验证的功能.：通过blur和keyup时间来触发验证规则此外，还是用ajax实现了服务器端远程验证。

都可以令前台开发变得非常的简单.下载地址：/project/vlidate写法一（推荐直接使用写法三，因为它实现了行为与结构的分离）废话少说，代码解释：<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script><script src="lib/jquery.validate.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$("#commentForm").validate();});</script><form class="cmxform" id="commentForm" method="get" action=""><fieldset><legend>一个简单的验证带验证提示的评论例子</legend><p><label for="cusername">姓名</label><em>*</em><input id="cusername" name="username" size="25" class="required" minlength ="2" /></p><p><label for="cemail">电子邮件</label><em>*</em><input id="cemail" name="email" size="25" class="required email" /></p><p><label for="curl">网址</label><em> </em><input id="curl" name="url" size="25" class="url" value="" /></p><p><label for="ccomment">你的评论</label><em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></texta rea></p><p><input class="submit" type="submit" value="提交"/></p></fieldset></form>验证效果：上面绿色标出的部分是需要注意的部分，也是validation执行验证的部分。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

jquery.validate 自定义验证方法$(document).ready( function() {/*** 身份证号码验证**/function isIdCardNo(num) {var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1); var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2"); var varArray = new Array();var intValue;var lngProduct = 0;var intCheckDigit;var intStrLen = num.length;var idNumber = num;// initializeif ((intStrLen != 15) && (intStrLen != 18)) {return false;}// check and set valuefor(i=0;i<intStrLen;i++) {varArray[i] = idNumber.charAt(i);if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) { return false;} else if (i < 17) {varArray[i] = varArray[i] * factorArr[i];}}if (intStrLen == 18) {//check datevar date8 = idNumber.substring(6,14);if (isDate8(date8) == false) {return false;}// calculate the sum of the productsfor(i=0;i<17;i++) {lngProduct = lngProduct + varArray[i];}// calculate the check digitintCheckDigit = parityBit[lngProduct % 11];// check last digitif (varArray[17] != intCheckDigit) {return false;}}else{ //length is 15//check datevar date6 = idNumber.substring(6,12); if (isDate6(date6) == false) {return false;}}return true;}/*** 判断是否为“YYYYMM”式的时期**/function isDate6(sDate) {if(!/^[0-9]{6}$/.test(sDate)) {return false;}var year, month, day;year = sDate.substring(0, 4);month = sDate.substring(4, 6);if (year < 1700 || year > 2500) return falseif (month < 1 || month > 12) return falsereturn true}/*** 判断是否为“YYYYMMDD”式的时期**/function isDate8(sDate) {if(!/^[0-9]{8}$/.test(sDate)) {return false;}var year, month, day;year = sDate.substring(0, 4);month = sDate.substring(4, 6);day = sDate.substring(6, 8);var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]if (year < 1700 || year > 2500) return falseif (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;if (month < 1 || month > 12) return falseif (day < 1 || day > iaMonthDays[month - 1]) return falsereturn true}// 身份证号码验证jQuery.validator.addMethod("idcardno", function(value, element) { return this.optional(element) || isIdCardNo(value);}, "请正确输入身份证号码");//字母数字jQuery.validator.addMethod("alnum", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);}, "只能包括英文字母和数字");// 邮政编码验证jQuery.validator.addMethod("zipcode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, "请正确填写邮政编码");// 汉字jQuery.validator.addMethod("chcharacter", function(value, element) { var tel = /^[\u4e00-\u9fa5]+$/;return this.optional(element) || (tel.test(value));}, "请输入汉字");// 字符最小长度验证（一个中文字符长度为2）jQuery.validator.addMethod("stringMinLength", function(value, element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length >= param);}, $.validator.format("长度不能小于{0}!"));// 字符最大长度验证（一个中文字符长度为2）jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("长度不能大于{0}!"));// 字符验证jQuery.validator.addMethod("string", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "不允许包含特殊符号!");// 手机号码验证jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length;return this.optional(element) || (length == 11 &&/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));}, "手机号码格式错误!");// 电话号码验证jQuery.validator.addMethod("phone", function(value, element) {var tel = /^(\d{3,4}-?)?\d{7,9}$/g;return this.optional(element) || (tel.test(value));}, "电话号码格式错误!");// 邮政编码验证jQuery.validator.addMethod("zipCode", function(value, element) { var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, "邮政编码格式错误!");// 必须以特定字符串开头验证jQuery.validator.addMethod("begin", function(value, element, param) {var begin = new RegExp("^" + param);return this.optional(element) || (begin.test(value));}, $.validator.format("必须以{0} 开头!"));// 验证两次输入值是否不相同jQuery.validator.addMethod("notEqualTo", function(value, element, param) { return value != $(param).val();}, $.validator.format("两次输入不能相同!"));// 验证值不允许与特定值等于jQuery.validator.addMethod("notEqual", function(value, element, param) { return value != param;}, $.validator.format("输入值不允许为{0}!"));// 验证值必须大于特定值(不能等于)jQuery.validator.addMethod("gt", function(value, element, param) {return value > param;}, $.validator.format("输入值必须大于{0}!"));// 验证值小数位数不能超过两位jQuery.validator.addMethod("decimal", function(value, element) {var decimal = /^-?\d+(\.\d{1,2})?$/;return this.optional(element) || (decimal.test(value));jQuery.validate 用法2010年04月12日星期一14:33名称返回类型描述validate(options) 返回:Validator 验证所选的FORMvalid() 返回:Boolean 检查是否验证通过rules() 返回:Options 返回元素的验证规则rules(add,rules) 返回:Options 增加验证规则rules(remove,rules)jquery.validate是一个基于jquery的非常优秀的验证框架，我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持。