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>
转载于:https://www.cnblogs.com/wangluochong/p/3751171.html
jquery.validate动态更改校验规则相关推荐
- jQuery Validate 验证,校验规则写在控件中的具体例子
将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...
- Jquery Validate 动态添加校验
<cx:script><script type="text/javascript">//修改表单验证,提交$(document).ready(functio ...
- jquery validate表单校验
https://blog.csdn.net/pengjunlee/article/details/80685500 jquery validate表单校验
- 2015/10/19总结:ajax传参、jquery.validate自定义日期校验
以下内容仅来自于日常实践零碎回顾.总结,不保证正确性,欢迎路过的大神指点指点! 1.这几天一直在写jsp前端页面,了解到前端与后端数据交互数据有两种.一种是form 的submit方式提交,这种方法可 ...
- jQuery.Validate验证库 2
四.使用方式 1.将校验规则写到控件中 Js代码 <script src="../js/jquery.js" type="text/javascript" ...
- jQuery.Validate验证库
一.用前必备 官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassi ...
- element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com ...
- bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由...
在上一篇使用jQuery.Validate进行客户端验证(中级篇-下)中我介绍了jQuery.Validate在日常使用的过程中会遇到哪些问题及解决办法,今天的高级篇则主要是对jQuery.Valid ...
最新文章
- 爬取王垠的博客并生成pdf
- android java split_Java中的split函数的用法
- Halcon学习笔记——机器视觉应用工程开发思路及相机标定
- Matlab各种最值问题
- 2021计算机基础知识题库,2021~2021计算机基础知识练习题
- 怎样安装ubuntu系统
- Weak References 和 Soft reference
- Python实现字符串对齐
- signature=efaf25d07c6ea03d7552906c0caee5a8,幼児の認知発達における関係把握の問題
- Java I/O 进化之路、传统 BIO 编程
- [转].net中的认证(authentication)与授权(authorization)
- 开机黑屏显示html,开机黑屏显示“This Product is covered by”解决方法
- 公开说说别人看不到_为什么我在QQ空间里面发表说说别人看不到
- 计算机学情分析万能模板,计算机教学计划5篇精选范文总结大全
- css bottom属性 使元素位置相对固定
- 涉密计算机杀毒记录表,保密工作自检自查记录表
- CSS3 使用@font-face引入字体的兼容性方案及优化
- 让荣之学告诉你Shopee选品思路及运营方法!
- 十款浏览器插件,让你拥有更好的浏览器体验
- Oracle 12.2 新特性:在线PDB数据库克隆(Pluggable Hot Clone)
热门文章
- python apply函数取数据中的后四位_python 实现rolling和apply函数的向下取值操作
- web 导出文件时如何让用户选择路径_Visual Paradigm 教程[UML]:如何绘制动画UML活动图?...
- 从RCNN到SSD,深度学习目标检测算法盘点
- 使用sklearn进行数据挖掘
- echarts grid的样式位置_CSS Grid 系列(下)-使用Grid布局构建网站首页
- ospf避免环路_13、OSPF的选路规则及路由控制
- python语言中包含的标准数据类型有哪些_Python中的标准数据类型
- Android做的第一个小程序
- 用ExpandableListView实现好友分组
- java点击按钮弹出警告_GUI求教~~~我想点击按钮确定后,弹出一个提示框输入有误!,,…...