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

点击(此处)折叠或打开

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

jquery.validate动态更改校验规则的更多相关文章

  1. jquery.validate动态更改校验规则 【转】

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

  2. jQuery Validate 验证，校验规则写在控件中的具体例子

    将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...

  3. Jquery Validate 动态添加校验

    <cx:script> <script type="text/javascript"> //修改表单验证,提交 $(document).ready(func ...

  4. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  5. 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性​1. [代码] 常见的注册表单元素 <form action="#" method="post" ...

  6. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  7. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  8. Jquery Validate动态添加和删除校验规则

    以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...

  9. jQuery.validate 的form校验

    jQuery验证框架 : 基本html代码: <script src="js/jquery-1.9.1.js"></script> <script s ...

随机推荐

  1. Android Handler 异步调用修改界面与主线程

    在Android编程的过程中,如果在Activity中某个操作会运行比较长的时间,比如:下载文件.这个时候如果在主线程中直接下载文件,会造成Activity卡死的现象:而且如果时间超过5秒,会有ANR ...

  2. 5 vue-cli整合axios的几种方法

    vue-cli配置axios https://www.cnblogs.com/rinzoo/p/7880525.html https://www.cnblogs.com/XHappyness/p/76 ...

  3. C#中几种创建对象的方式的对比

    最近学习了msil,发现了很多好玩的,今天介绍一个用IL来创建对象的方式 1.最常见的两种创建对象方式 public static T Create<T>() where T : new( ...

  4. HGOI20181030 模拟题解

    problem:给定一个序列,问你能不能通过一次交换把他弄成有序 sol: 对于0%的数据,满足数列是一个排列,然后我就打了这档分(自己瞎造的!) 对于100%的数据,显然我们先对数列进行排序然后上下 ...

  5. NOIP2018备考——DP专题练习

    P4095 [HEOI2013]Eden 的新背包问题   P2657 [SCOI2009]windy数   P3413 SAC#1 - 萌数   P3205 [HNOI2010]合唱队   P476 ...

  6. 洛谷 P5108 仰望半月的夜空 解题报告

    P5108 仰望半月的夜空 题目描述 半月的夜空中,寄托了多少人与人之间的思念啊 曦月知道,这些思念会汇集成一个字符串\(S(n = |S|)\) 由于思念汇集的过于复杂,因此曦月希望提炼出所有的思念 ...

  7. GDOI2018 Day1 题目总结

    T1:农场 题意:有一个长为 $n$ 的序列 $a$,要求将其分成尽可能多的部分,使得每一部分的 $a_i$ 的和相等.求最多能分成的部分数. $30\%:1\le n\le 1000$ $80\%: ...

  8. 解题：BZOJ 5093 图的价值

    题面 显然只需要考虑一个点(再乘n),那么枚举这个点的度数,另外的$\frac{(n-1)(n-2)}{2}$条边是随意连的,而这个点连出去的边又和其余$n-1$个点产生组合,所以答案就是 $n*\f ...

  9. 错误日志收集sentry的安装与简单使用

    通过官方文档https://docs.sentry.io/可以得知,安装服务有两种方式,一种是使用Python,这种方式个人感觉比较麻烦.于是选择了第二种方式:使用docker. 我是在Windows ...

  10. 【总结】STL--map

    map支持以下功能: size():查询 map 中的 key 的个数 empty():判空 clear():清空 insert()/erase():插入/删除 find(x):查找 key 为 x ...