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
jquery.validate动态更改校验规则 【转】的更多相关文章
- jquery.validate动态更改校验规则
有时候表单中有多个字段是相互关联的,以下遇到的就是证件类型和证件号码的关联,在下拉框中选择不同的证件类型,证件号码的值的格式都是不同的,这就需要动态的改变校验规则. 点击(此处)折叠或打开 <! ...
- jQuery Validate 验证，校验规则写在控件中的具体例子
将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...
- Jquery Validate 动态添加校验
<cx:script> <script type="text/javascript"> //修改表单验证,提交 $(document).ready(func ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- 使用JQuery.Validate插件来校验页面表单有效性
使用JQuery.Validate插件来校验页面表单有效性1. [代码] 常见的注册表单元素 <form action="#" method="post" ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- Jquery Validate动态添加和删除校验规则
以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...
- jQuery.validate 的form校验
jQuery验证框架 : 基本html代码: <script src="js/jquery-1.9.1.js"></script> <script s ...
随机推荐
- [Codeforces 115E]Linear Kingdom Races
题目大意: 有n块地,初始是荒地.你可以把某些荒地开垦(需要花费相应的价值\(a_i\)(正整数)),然后这些荒地就可以种田. 现在有m年,每年要在l到r区间内种田,获得p(正整数)的价值(必须保证l ...
- BZOJ 2342 [SHOI2011]双倍回文 (回文自动机)
题目大意:略 先建出$PAM$ 因为双倍回文串一定是4的倍数,所以找出$PAM$里所有$dep$能整除4的节点 看这个串是否存在一个回文后缀,长度恰好为它的一半,沿着$pre$链往上跳就行了 暴跳可能 ...
- crm 系统项目(二) admin 后台操作表格
crm 系统项目(二) admin 后台操作表格 1. app下创建 templates 运行的时候 先找全局的templates——> 按照app的注册顺序找templates中的文件 2. ...
- 数据库-mongodb-Gridfs
GridFS是一种将大型文件存储在MongoDB的文件规范: 数据库支持以BSON格式保存二进制对象. 但是MongoDB中BSON对象最大不能超过4MB. GridFS 规范提供了一种透明的机制,可 ...
- hdu4927 Series 1（组合+公式 Java大数高精度运算）
题目链接: Series 1 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
- LIVE555研究之五：RTPServer（二）
port是一样的. DynamicRTSPServer 继承关系: Medium是非常多类的基类.内部定义了指向环境类的引用和一个char类型媒体名称.并定义了依照媒体名称,查找相应媒体的成员函数lo ...
- js中callback执行
<!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...
- iOS：简单使用UIAlertVIew和UIActionSheet
做iOS开发的同学想必都用过UIAlertVIew或者UIActionSheet.UIAlertVIew 可以弹出一个出现在屏幕中间的提示视图,给用户展示信息,并让用户自己选择操作,UIActionS ...
- 不仅仅是Google，您必须知道的全球十大地图API
不仅仅是Google,您必须知道的全球十大地图API 一.总结 一句话总结:除了google,也有其它很多很好的地图,必应地图(Bing Maps),OpenLayers 二.不仅仅是Google,您 ...
- [codeforces 859 E] Desk Disorder 解题报告 （并查集+思维）
题目链接:http://codeforces.com/problemset/problem/859/E 题目大意: 有$n$个人,$2n$个座位. 给出这$n$个人初始的座位,和他们想坐的座位. 每个 ...