jquery.validate動態更改校驗規則

時間  2019-11-12
標籤 jquery.validate jquery validate 動態 更改 校驗 規則 欄目 JQuery 简体版
原文   原文鏈接

有時候表單中有多個字段是相互關聯的，如下遇到的就是證件類型和證件號碼的關聯，在下拉框中選擇不一樣的證件類型，證件號碼的值的格式都是不一樣的，這就須要動態的改變校驗規則。

javascript

點擊(此處)摺疊或打開css

  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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程