jquery.validate动态更改校验规则

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

<!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

你可能感兴趣的:(validate)