jquery.validate动态更改校验规则

2022-09-08 15:27:10

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

点击(此处)折叠或打开

  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">
  11. //===================放在validate.addmethod.js中=========================
  13. //检查号码是否符合规范，包括长度，类型
  14. isCardNo = function(card)
  15. {
  16.     //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
  17.     var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
  18.     if(reg.test(card) === false)
  19.     {
  20.         return false;
  21.     }
  22.     return true;
  23. };
  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. };
  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位），校验位末尾可能为X
  52.     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. };
  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: 2
  171.                 stringCheck:true
  172.             }
  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">请选择</option
  207.                     <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">&nbsp;
  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">&nbsp;
  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>

jquery.validate动态更改校验规则,布布扣,bubuko.com

jquery.validate动态更改校验规则

上一篇：css3 ------ box-shadow


下一篇：web开发连接池方法