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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="jquery-1.7.2.js" type="text/javascript"></script>

<script src="jquery.validate.js" type="text/javascript"></script>

<script src="validate.addmethod.js" type="text/javascript"></script>

<script src="messages_zh.js" type="text/javascript"></script>

<script type="text/javascript">

//===================放在validate.addmethod.js中=========================

//检查号码是否符合规范，包括长度，类型

isCardNo = function(card)

{

    //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X

    var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;

    if(reg.test(card) === false)

    {

        return false;

    }

    return true;

};

//取身份证前两位,校验省份

checkProvince = function(card)

{

    var province = card.substr(0,2);

    if(vcity[province] == undefined)

    {

        return false;

    }

    return true;

};

//检查生日是否正确

checkBirthday = function(card)

{

    var len = card.length;

    //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字

    if(len == '15')

    {

        var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;

        var arr_data = card.match(re_fifteen);

        var year = arr_data[2];

        var month = arr_data[3];

        var day = arr_data[4];

        var birthday = new Date('19'+year+'/'+month+'/'+day);

        return verifyBirthday('19'+year,month,day,birthday);

    }

    //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X

    if(len == '18')

    {

        var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;

        var arr_data = card.match(re_eighteen);

        var year = arr_data[2];

        var month = arr_data[3];

        var day = arr_data[4];

        var birthday = new Date(year+'/'+month+'/'+day);

        return verifyBirthday(year,month,day,birthday);

    }

    return false;

};

//校验日期

verifyBirthday = function(year,month,day,birthday)

{

    var now = new Date();

    var now_year = now.getFullYear();

    //年月日是否合理

    if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day)

    {

        //判断年份的范围（3岁到100岁之间)

        var time = now_year - year;

        if(time >= 3 && time <= 100)

        {

            return true;

        }

        return false;

    }

    return false;

};

//校验位的检测

checkParity = function(card)

{

    //15位转18位

    card = changeFivteenToEighteen(card);

    var len = card.length;

    if(len == '18')

    {

        var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);

        var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');

        var cardTemp = 0, i, valnum;

        for(i = 0; i < 17; i ++)

        {

            cardTemp += card.substr(i, 1) * arrInt[i];

        }

        valnum = arrCh[cardTemp % 11];

        if (valnum == card.substr(17, 1))

        {

            return true;

        }

        return false;

    }

    return false;

};

//15位转18位身份证号

changeFivteenToEighteen = function(card)

{

    if(card.length == '15')

    {

        var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);

        var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');

        var cardTemp = 0, i;

        card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);

        for(i = 0; i < 17; i ++)

        {

            cardTemp += card.substr(i, 1) * arrInt[i];

        }

        card += arrCh[cardTemp % 11];

        return card;

    }

    return card;

};

isIdCardNo = function(card)

{

    //是否为空

    if(card === '')

    {

        return false;

    }

    //校验长度，类型

    if(isCardNo(card) === false)

    {

        return false;

    }

    //检查省份

    if(checkProvince(card) === false)

    {

        return false;

    }

    //校验生日

    if(checkBirthday(card) === false)

    {

        return false;

    }

    //检验位的检测

    if(checkParity(card) === false)

    {

        return false;

    }

    return true;

};

    // 身份证号码验证

    jQuery.validator.addMethod("isIdCardNo", function(value, element) {

     return this.optional(element) || isIdCardNo(value);

    }, "请正确输入您的身份证号码");

    // 护照号格式验证

    jQuery.validator.addMethod("isPassport", function(value,element) {

          var passport = "/(P/d{7})|(G/d{8})/";

         return this.optional(element) || (passport.test(value));

        }, "请正确填写您的护照号");

//===================放在validate.addmethod.js中END=========================

$(document).ready(function() {

    $("#ctc_form").validate({

        ignore: "", // 开启hidden验证， 1.9版本后默认关闭

        rules: {

            "qq": {

                required: true,

                //minlength: 2

                stringCheck:true

            }

        }

    });

    $("#papersType").change( function() {

        var type = $("#papersType").find("option:selected").text();

        if(type=="身份证"){

            $("#papersCode").rules("remove");

            $("#papersCode").rules("add", { required: true,isIdCardNo: true, messages: { required: "请正确输入您的身份证号码"} });

        }else if(type == "军官证"){

            $("#papersCode").rules("remove");

            $("#papersCode").rules("add", { required: true,stringCheck:true,minlength:6,maxlength:8, messages: { required: "请输入正确的军官证号"} });

        }else if(type == "护照"){

            $("#papersCode").rules("remove");

            $("#papersCode").rules("add", { required: true,isPassport:true, messages: { required: "请正确填写您的护照号"} });

        }else if(type == "机动车驾驶证"){

            $("#papersCode").rules("remove");

            $("#papersCode").rules("add", { required: true,stringCheck:true, messages: { required: "机动车驾驶证是必填"} });

        }else{

            $("#papersCode").rules("remove");

            $("#papersCode").rules("add", { required: true,stringCheck:true, messages: { required: "必填"} });

        }

    });

});

</script>

<title></title>

</head>

<body>

  <div class="m_right">

    <form id="ctc_form" method="post" action="">

        <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse;border-spacing: 0; border:0;margin:0px auto;">

              <tr>

                <td width="90" class="m_r_s_con_td"><span class="required_mark">*</span>证件类型 </td>

                <td width="275" class="m_r_s_con_text"><label for="select"></label>

                  <select name="papersType" id="papersType">

                    <option value="0">请选择</option

                    <option value="1">身份证</option>

                    <option value="2">军官证</option>

                    <option value="3">护照</option>

                    <option value="4">机动车驾驶证</option>

                    <option value="5">其他</option>

                </select></td>

                <td class="m_r_s_con_text"></td>

              </tr>

              <tr>

                <td width="90" class="m_r_s_con_td"><span class="required_mark">*</span>证件证号 </td>

                <td width="275" class="m_r_s_con_text"> 

                <input name="papersCode" id="papersCode"/>

                </td>

                <td class="m_r_s_con_text"></td>

              </tr>

              <tr>

                <td width="90" class="m_r_s_con_td"><span class="required_mark">*</span>QQ </td>

                <td width="275" class="m_r_s_con_text"> 

                <input name="qq" id="qq"/>

                </td>

                <td class="m_r_s_con_text"></td>

              </tr>

         </table>

      <input type="submit" value="添加" />

    </form>

  </div>

</body>

</html>

　　转自：http://blog.chinaunix.net/uid-20690917-id-3381743.html

jquery.validate动态更改校验规则 【转】的更多相关文章

  1. jquery.validate动态更改校验规则

    有时候表单中有多个字段是相互关联的,以下遇到的就是证件类型和证件号码的关联,在下拉框中选择不同的证件类型,证件号码的值的格式都是不同的,这就需要动态的改变校验规则. 点击(此处)折叠或打开 <! ...

  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. github删除项目or仓库

    1. 登录 github (要注册账号) 2. 登录后点击右上侧头像,选择 Your profile . 3. 选择Repositories,可以查看已有的库,选择要删除的库进入. 4. 选择Sett ...

  2. BZOJ 3675 [Apio2014]序列分割 (斜率优化DP)

    洛谷传送门 题目大意:让你把序列切割k次,每次切割你能获得 这一整块两侧数字和的乘积 的分数,求最大的分数并输出切割方案 神题= = 搞了半天也没有想到切割顺序竟然和答案无关...我太弱了 证明很简单 ...

  3. 窗口管理工具 screen

    简介 Screen是一款用于命令行终端切换的自由软件 用户可以通过该软件同时连接多个本地或远程的命令行会话,并在其间自由切换 GNU Screen可以看作是窗口管理器的命令行界面版本 它提供了统一的管 ...

  4. navicat连接SQL Sever数据库出现的问题

    1.navicat 连接sqlserver提示要安装 sql server native client 解决办法:在navicat安装目录下有个sqlncli_x64.msi文件,双击安装一直下一步就 ...

  5. java中的接口中的方法

    题目如下:(多选题)请选择以下接口定义正确的方法() A:public static void main (String[] args); B:private void test(); C:publi ...

  6. mysql-5.7.10-winx64 安装

    安装ZIP中的EXE文件后,找到安装目录中的my-default.ini加入代码 1 2 3 4 5 6 #新设置的 [mysql] default-character-set=utf8 #新设置的 ...

  7. cocos2d-x-3.3rc2-003 cocos中的引用计数和自己主动释放池

    点击打开链接

  8. perl getopt 用法

    我们在linux经常常使用到一个程序须要增加參数,如今了解一下perl中的有关控制參数的函数.getopt.在linux有的參数有二种形式.一种是--help,还有一种是-h.也就是-和--的分别.- ...

  9. 好莱坞原则—Spring的IOC容器

    IOC容器的概念,之前在学习SSH的时候,就有接触过.但那时候也仅仅是知道这么个概念,认为它非常难理解.事实上并非它难理解,而是我并没有停下来好好对它总结梳理过. IOC(Inversion of C ...

  10. ORACLE 索引批量重建

    按用户批量重建索引: 按用户将此用户下面非临时表上面的索引全部重建,此过程建议在SYS用户下面执行: CREATE OR REPLACE PROCEDURE BATCH_REBUILD_INDEX(U ...