`

jquery.validate动态校验

    博客分类：
  • js
 
阅读更多
  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>
分享到：
| The tomcat server configuration at /seve ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.validate.js表单验证.pdf

    从给定的文件信息来看，文件主要介绍了jquery.validate.js的表单验证功能。jquery.validate.js是一个强大的jQuery插件，可以帮助开发者快速实现表单验证。以下是该文件中提及的关键知识点： 1. jquery.validate.js...

    jquery.validate.js校验页面的js与使用方法

    引入页面的时候，引入： ... ${request.contextPath}/js/common/plug/jquery/jquery.validate.min.js"&gt; ${request.contextPath}/js/common/plug/jquery/jquery.validate.expand.js"&gt; 把标题正确引入即可使用

    jquery.validate.min.js

    修改validate的remote校验，支持处理返回格式{success:false,message:"提示消息"}

    jQuery验证控件jquery.validate.js使用说明+中文API

    jquery.validate.js 提供了多种默认的校验规则，包括： 1. `required`: 必输字段 2. `remote`: 使用 Ajax 方法调用 check.php 验证输入值 3. `email`: 必须输入正确格式的电子邮件 4. `url`: 必须输入正确格式的...

    jquery.validate 扩展身份证校验方法

    ### jQuery.validate 扩展身份证校验方法 在前端开发中，对用户输入的数据进行校验是非常重要的一步，它能够帮助开发者提高数据的准确性和安全性。本文将详细介绍如何使用`jQuery.validate`插件来扩展身份证号码的...

    jquery.validate表单验证密码完整例子(带密码强度显示）

    首先，`jQuery Validate`的核心功能是验证用户在表单中输入的数据，确保其符合预设的验证规则。例如，我们可以设定密码必须包含字母、数字、特殊字符等要求，以提高安全性。在提供的例子中，它会检查用户输入的密码...

    jquery.validate表单验证框架详解

    ### jQuery.validate 表单验证框架详解 在现代Web开发中，表单验证是不可或缺的一环，它确保用户输入的数据符合预期格式，从而提高用户体验并减少服务器端的压力。jQuery.validate插件便是为此而生，它提供了丰富的...

    功能强大的jquery.validate表单验证插件

    功能强大的jquery.validate表单验证插件是一个专门用于实现表单验证的jQuery插件，它以其易用性和强大的功能受到了广大开发者的青睐。 首先，jquery.validate表单验证插件能够有效地提高开发效率，因为它内置了多种...

    JQuery+validate校验+messages_zh中文的js库

    `jquery.validate.js` 和 `jquery.validate.min.js` 就是这个插件的源码和压缩版。这个插件提供了一套强大的规则引擎，可以轻松地为表单元素添加验证规则，例如必填、邮箱格式、数字范围等，极大地提高了用户输入...

    jquery.validate的使用说明介绍

    jquery.validate提供了一系列的默认校验规则，这些规则可以覆盖大部分的表单验证需求。这些规则包括： 1. required: true，用于标识必填字段，如果该字段为空，则验证失败。 2. remote: "check.php"，利用Ajax方法...

    jquery.validate插件remote规则相同值不验证的问题解决办法

    jquery.validate插件remote规则相同值不验证的问题解决办法.方法绝对有效

    jquery.validate.js 用法

    ### jQuery Validate插件详解 #### 一、简介 `jquery.validate.js` 是一款基于jQuery的表单验证插件，能够方便地实现客户端表单验证功能。该插件提供了丰富的内置验证方法，支持必填项检查、邮箱格式验证、URL验证...

    jquery.validate知识要点

    `jQuery.validate`插件是一种基于jQuery的表单验证工具，它可以帮助开发者快速实现客户端数据校验功能，提高用户体验的同时减少服务器端的压力。该插件支持多种内置验证规则，并且可以方便地扩展自定义规则。 #### ...

    jquery.validate表单验证插件使用方法解析

    jquery.validate是jQuery的一个表单验证插件，它提供了丰富、灵活的表单验证功能，可以极大地简化开发者在前端表单验证中的工作。使用jquery.validate可以轻松地对表单中的字段进行验证，确保输入数据符合要求，从而...

    jquery validate 信息气泡提示

    在网页开发中，jQuery Validate 是一个非常常用的验证插件，用于对用户输入的数据进行校验，确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则，提高用户体验，减少服务器端的压力。结合 ...

    jquery.validate例子

    `jQuery Validate`是一个非常流行的JavaScript库，用于在前端进行表单验证。这个库极大地简化了对用户输入数据的检查，确保在提交之前数据是有效且符合预期格式的。`jQuery Validate`是`jQuery`生态的一部分，它依赖...

    jquery.validate.js

    而validate.js是jQuery的一个插件，它为表单验证提供了强大而灵活的支持，使得前端数据校验变得更加简单。本文将深入探讨validate.js的核心原理、使用方法以及常见应用场景。 一、validate.js概述 validate.js是...

    jQuery.validate.js+API中文

    ### jQuery.validate.js+API中文详解 #### 概述 `jQuery.validate.js` 是一款非常流行的JavaScript库，专门用于客户端表单验证。它基于jQuery框架，提供了丰富的验证规则和灵活的自定义选项，使得开发者能够轻松地...

    jquery.validate_Validation

    《jQuery Validate验证插件详解》 jQuery Validate是一个强大的表单验证插件，它为开发者提供了简单易用的API，用于确保用户在提交表单时输入的数据满足特定的格式和要求。该插件大大简化了前端数据验证的过程，...

    jquery的校验规则（jquery.validate）

    `jQuery Validate` 是一个非常流行的 jQuery 插件，用于对网页中的表单进行验证。它提供了丰富的预定义验证规则，帮助开发者轻松实现各种复杂的用户输入验证，从而确保数据的准确性和安全性。以下是对 `jQuery ...

Magicbox
Global site tag (gtag.js) - Google Analytics