jquery.validate动态校验

  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>

你可能感兴趣的:(validate)