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

posted on 2014-04-24 14:23  jenqz  阅读(4406)  评论(0编辑  收藏  举报