有時候表單中有多個字段是相互關聯的，以下遇到的就是證件類型和證件號碼的關聯，在下拉框中選擇不同的證件類型，證件號碼的值的格式都是不同的，這就需要動態的改變校驗規則。
<!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