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

点击(此处)折叠或打开

  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. 作业四 任务分解（WBS）

    近日忙于实验,未来得及完成任务分解昨晚召开了紧急会议,才确定了任务划分.主体分配如下:三名编程人员,一个主编两个辅编,一人做需求分析,一人做程序测试,一人专司文档. 具体细节如下:在剩余的三周左右的时 ...

  2. 初学Hadoop之单机模式环境搭建

    本文仅作为学习笔记,供大家初学Hadoop时学习参考.初学Hadoop,欢迎有经验的朋友进行指导与交流! 1.安装CentOS7 准备 CentOS系统镜像CentOS-7.0-1406-x86_64 ...

  3. 关于使用实验室服务器的GPU以及跑上TensorFlow代码

    连接服务器 Windows - XShell XFtp SSH 通过SSH来连接实验室的服务器 使用SSH连接已经不陌生了 github和OS课设都经常使用 目前使用 192.168.7.169 使用 ...

  4. 蜗牛慢慢爬 LeetCode 23. Merge k Sorted Lists [Difficulty: Hard]

    题目 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...

  5. PAT 甲级 1051 Pop Sequence

    https://pintia.cn/problem-sets/994805342720868352/problems/994805427332562944 Given a stack which ca ...

  6. FuelPHP 系列（一） ------ Oil 命令

    之前用过 Laravel,框架自带的 artisan 命令,用得爽到爆.现在工作需要,要学习 FuelPHP,首先看到框架目录结构,有 coposer.json 框架可以用 composer 管理,一 ...

  7. Git 使用中显示“Another git process seems to be running in this repository...”问题解决

    一.引言:问题回忆 这几天,我同时在使用vs2017自带的git管理工具和git bash命令行工具对于同一个工作区进行了git操作管理. 其中,当我在vs2017中对文件进行了更改,突然脑洞大开,想 ...

  8. Java重写toString和泛型的使用

    一.在一个类中重写toString方法 public class Person { private String name; private int age; public Person() { } ...

  9. BZOJ2753 SCOI2012滑雪与时间胶囊（最小生成树）

    首先显然可以把所有能到的点拎出来建个新图,这样第一问也就做好了. 剩下的部分似乎是一个裸的最小树形图.但显然这个东西是没什么学的必要的并且不太能跑过去. 考虑建出来的图有什么性质.可以发现如果没有高度 ...

  10. 【BZOJ1037】[ZJOI2008]生日聚会（动态规划）

    [BZOJ1037][ZJOI2008]生日聚会(动态规划) 题面 BZOJ 洛谷 题解 假设前面的都合法,但是在加完当前的最后一个人之后变得不合法了,那么意味着一定有着一个后缀不合法.把男生看成\( ...