有时候表单中有多个字段是相互关联的，以下遇到的就是证件类型和证件号码的关联，在下拉框中选择不同的证件类型，证件号码的值的格式都是不同的，这就需要动态的改变校验规则。
点击(此处)折叠或打开
- <!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>
jquery.validate动态更改校验规则,布布扣,bubuko.com
时间： 2024-12-07 15:26:09