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

点击(此处)折叠或打开

  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. Restful api 防止重复提交

    当前很多网站是前后分离的,前端(android,iso,h5)通过restful API 调用 后端服务器,这就存在一个问题,对于创建操作,比如购买某个商品,如果由于某种原因,手抖,控件bug,网络错 ...

  2. Android GridView数据绑定

    java代码构造个泛型数组用于存放item,作为title        List<Map<String, Object>> items = new ArrayList< ...

  3. 一本通1649【例 2】2^k 进制数

    1649:[例 2]2^k 进制数 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 原题来自:NOIP 2006 提高组 设 r 是个 2k 进制数,并满足以 ...

  4. 【大数据】Zookeeper学习笔记

    第1章 Zookeeper入门 1.1 概述 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目. 1.2 特点 1.3 数据结构 1.4 应用场景 提供的服务包括:统 ...

  5. Dubbo 生态添新兵，Dubbo Admin 发布 v0.1

    为了提升 Dubbo 里程碑版本2.7.0的使用体验,我们于去年年中启动了 Dubbo Admin 的重构计划,并作为Dubbo生态的子项目,于近期发布了v0.1,重构后的项目在结构上的变化如下: 将 ...

  6. 【BZOJ1053】[HAOI2007]反素数（搜索）

    [BZOJ1053][HAOI2007]反素数(搜索) 题面 BZOJ 洛谷 题解 大力猜一下用不了几个质因子,那么随便爆搜一下就好了. #include<iostream> #inclu ...

  7. 【拓扑 字符串还原 + 线段树维护】奇洛金卡达(father)

    奇洛金卡达(father) Description 阿良良木历将要迎来人生(不,是吸血鬼生涯)的第三次战斗——与身为人类的奇洛金卡达在直江津高中的操场solo,以取回Heartunderblade 的 ...

  8. USACO Section 2.1 The Castle 解题报告

    题目 题目描述 有一个城堡,城堡中有若干个房间,房间与房间之间用墙来进行分隔.现在我们需要统计这个城堡有多少个房间,并且还要找出最大的房间的面积是多少(一个单元格就代表一个单元面积).城堡的主人现在想 ...

  9. 解题：BZOJ 2989 数列

    题面 学习二进制分组 题目本身可以看成二维平面上的问题,转成切比雪夫距离后就是矩形和了 二进制分组是将每个修改添加到末尾,然后从后往前二进制下进位合并,这样最多同时有$\log n$组,每个修改只会被 ...

  10. Openstack运维指南文档整理

    非常全面的运维指南整理http://zjzone.cc/index.php/2017/07/31/openstack-yun-wei-wen-dang-zheng-li/