首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery validation验证身份证号,护照,电话号码,email(实例代码)

Posted in Javascript onNovember 06, 2013

validata.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>无标题文档</title>
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/card.js" type="text/javascript"></script>
<script src="lib/validata.js" type="text/javascript"></script>
<style type="text/css">
 em.success{
  background:url("images/tips_arrow.gif") no-repeat left 0px;
  padding-left:16px;
  margin-left:2px;
 }
 em.error{
  background:url("images/tips_arrow.gif") no-repeat left -51px;
  display:inline;
  padding-left:10px;
  font-style:normal;
  font-size:11px;
  margin-left:2px;
  font-family:12px/162% Arial, Helvetica, sans-serif; }
</style>

</head>
<body>
 <form class="cmsform" id="commentForm" method="get" action="">
  <p>
   <label for="cusername">姓名</label><em>*</em>
   <input id="cusername" name="username" size="25" />
  </p>
  <p>
   <label for="cemail">电子邮件</label><em>*</em>
   <input id="cemail" name="email" size="25" />
  </p>
  <p>
   <label for="card">身份证号</label><em>*</em>
   <input id="card" name="card" size="25"/>
  </p>
  <p>
   <label for="passport">护照编号</label><em>*</em>
   <input id="passport" name="passport" size="25"/>
  </p>
  <p>
   <label for="phone">电话号码</label><em>*</em>
   <input id="phone" name="phone" size="25" />
  </p>
 </form>
</body>
</html>

validata.js
  $(function(){  $.validator.setDefaults({ 
     submitHandler: function(form) { 
      form.submit(); 
     } 
  }); 
  // 字符验证 
  jQuery.validator.addMethod("stringCheck", function(value, element) { 
     return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); 
  }, "只能包括中文字、英文字母、数字和下划线"); 
  // 中文字两个字节 
  jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
     var length = value.length; 
    for(var i = 0; i < value.length; i++){ 
  if(value.charCodeAt(i) > 127){ 
  length++; 
  } 
  } 
  return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); 
// 身份证号码验证 
jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
  return this.optional(element) || idCardNoUtil.checkIdCardNo(value);     
}, "请正确输入您的身份证号码"); 
//护照编号验证
 jQuery.validator.addMethod("passport", function(value, element) { 
  return this.optional(element) || checknumber(value);     
}, "请正确输入您的护照编号"); 
// 手机号码验证 
jQuery.validator.addMethod("isMobile", function(value, element) { 
  var length = value.length; 
  var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 
  return this.optional(element) || (length == 11 && mobile.test(value)); 
}, "请正确填写您的手机号码"); 
// 电话号码验证 
jQuery.validator.addMethod("isTel", function(value, element) { 
  var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 
  return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的电话号码"); 
// 联系电话(手机/电话皆可)验证 
jQuery.validator.addMethod("isPhone", function(value,element) { 
  var length = value.length; 
  var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 
  var tel = /^\d{3,4}-?\d{7,9}$/; 
  return this.optional(element) || (tel.test(value) || mobile.test(value)); 
}, "请正确填写您的联系电话"); 
// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) { 
  var tel = /^[0-9]{6}$/; 
  return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的邮政编码"); 
//开始验证 
$('#commentForm').validate({ 
  rules: { 
  username: { 
  required:true, 
  stringCheck:true, 
  byteRangeLength:[3,15] 
  }, 
  email:{ 
  required:true, 
  email:true 
  }, 
  phone:{ 
  required:true, 
  isMobile:true 
  }, 
  address:{ 
  required:true, 
  stringCheck:true, 
  byteRangeLength:[3,100] 
  },
  card:{
   required:true,
   isIdCardNo:true
  },
    passport:{
   required:true,
   passport:true
  }
  }, 
   
  messages:{ 
  username: { 
  required: "请填写用户名", 
  stringCheck: "用户名只能包括中文字、英文字母、数字和下划线", 
  byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" 
  }, 
  email:{ 
  required: "<font color=red>请输入一个Email地址</fond>", 
  email: "请输入一个有效的Email地址" 
  }, 
  phone:{ 
  required: "请输入您的联系电话", 
  isPhone: "请输入一个有效的联系电话" 
  }, 
  address:{ 
  required: "请输入您的联系地址", 
  stringCheck: "请正确输入您的联系地址", 
  byteRangeLength: "请详实您的联系地址以便于我们联系您" 
  },
  card:{
  required:"请输入身份证号",
  isIdCardNo:"请输入正确的身份证号"
  },
  passport:{
  required:"请输入护照编号",
  passport:"请输入正确的护照编号"
  }
  }, 
   
  focusInvalid: false, 
  onkeyup: false, 
   
  errorPlacement: function(error, element) { 
  error.appendTo( element.parent()); 
  }, 
  errorElement:"em",
  error:function(label){label.text(" ").addClass("error");}
  });  
})

card.js
var idCardNoUtil = {
provinceAndCitys: {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",
31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",
45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",
65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"},

powers: ["7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2"],

parityBit: ["1","0","X","9","8","7","6","5","4","3","2"],

genders: {male:"男",female:"女"},

checkAddressCode: function(addressCode){
var check = /^[1-9]\d{5}$/.test(addressCode);
if(!check) return false;
if(idCardNoUtil.provinceAndCitys[parseInt(addressCode.substring(0,2))]){
return true;
}else{
return false;
}
},

checkBirthDayCode: function(birDayCode){
var check = /^[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))$/.test(birDayCode);
if(!check) return false;
var yyyy = parseInt(birDayCode.substring(0,4),10);
var mm = parseInt(birDayCode.substring(4,6),10);
var dd = parseInt(birDayCode.substring(6),10);
var xdata = new Date(yyyy,mm-1,dd);
if(xdata > new Date()){
return false;//生日不能大于当前日期
}else if ( ( xdata.getFullYear() == yyyy ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) ){
return true;
}else{
return false;
}
},

getParityBit: function(idCardNo){
var id17 = idCardNo.substring(0,17);
var power = 0;
for(var i=0;i<17;i++){
power += parseInt(id17.charAt(i),10) * parseInt(idCardNoUtil.powers[i]);
}
var mod = power % 11;
return idCardNoUtil.parityBit[mod];
},

checkParityBit: function(idCardNo){
var parityBit = idCardNo.charAt(17).toUpperCase();
if(idCardNoUtil.getParityBit(idCardNo) == parityBit){
return true;
}else{
return false;
}
},

checkIdCardNo: function(idCardNo){
//15位和18位身份证号码的基本校验
var check = /^\d{15}|(\d{17}(\d|x|X))$/.test(idCardNo);
if(!check) return false;
//判断长度为15位或18位
if(idCardNo.length==15){
return idCardNoUtil.check15IdCardNo(idCardNo);
}else if(idCardNo.length==18){
return idCardNoUtil.check18IdCardNo(idCardNo);
}else{
return false;
}
},
//校验15位的身份证号码
check15IdCardNo: function(idCardNo){
//15位身份证号码的基本校验
var check = /^[1-9]\d{7}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}$/.test(idCardNo);
if(!check) return false;
//校验地址码
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check) return false;
var birDayCode = '19' + idCardNo.substring(6,12);
//校验日期码
return idCardNoUtil.checkBirthDayCode(birDayCode);
},
//校验18位的身份证号码
check18IdCardNo: function(idCardNo){
//18位身份证号码的基本格式校验
var check = /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/.test(idCardNo);
if(!check) return false;
//校验地址码
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check) return false;
//校验日期码
var birDayCode = idCardNo.substring(6,14);
check = idCardNoUtil.checkBirthDayCode(birDayCode);
if(!check) return false;
//验证校检码
return idCardNoUtil.checkParityBit(idCardNo);
},
formateDateCN: function(day){
var yyyy =day.substring(0,4);
var mm = day.substring(4,6);
var dd = day.substring(6);
return yyyy + '-' + mm +'-' + dd;
},
//获取信息
getIdCardInfo: function(idCardNo){
var idCardInfo = {
gender:"", //性别
birthday:"" // 出生日期(yyyy-mm-dd)
};
if(idCardNo.length==15){
var aday = '19' + idCardNo.substring(6,12);
idCardInfo.birthday=idCardNoUtil.formateDateCN(aday);
if(parseInt(idCardNo.charAt(14))%2==0){
idCardInfo.gender=idCardNoUtil.genders.female;
}else{
idCardInfo.gender=idCardNoUtil.genders.male;
}
}else if(idCardNo.length==18){
var aday = idCardNo.substring(6,14);
idCardInfo.birthday=idCardNoUtil.formateDateCN(aday);
if(parseInt(idCardNo.charAt(16))%2==0){
idCardInfo.gender=idCardNoUtil.genders.female;
}else{
idCardInfo.gender=idCardNoUtil.genders.male;
}
}
return idCardInfo;
},

getId15:function(idCardNo){
if(idCardNo.length==15){
return idCardNo;
}else if(idCardNo.length==18){
return idCardNo.substring(0,6) + idCardNo.substring(8,17);
}else{
return null;
}
},

getId18: function(idCardNo){
if(idCardNo.length==15){
var id17 = idCardNo.substring(0,6) + '19' + idCardNo.substring(6);
var parityBit = idCardNoUtil.getParityBit(id17);
return id17 + parityBit;
}else if(idCardNo.length==18){
return idCardNo;
}else{
return null;
}
}
};
//验证护照是否正确
function checknumber(number){
var str=number;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/(P\d{7})|(G\d{8})/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
   return true;
}else{
   return false;
} 
};

jquery validation验证身份证号,护照,电话号码,email(实例代码)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
css样式标签和js语法属性区别
Nov 06 #Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 #Javascript
jQuery中$.fn的用法示例介绍
Nov 05 #Javascript
可选择和输入的下拉列表框示例
Nov 05 #Javascript
js函数返回多个返回值的示例代码
Nov 05 #Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 #Javascript
查看大图功能代码jquery版
Nov 05 #Javascript
欧洲购物网站(15) 波兰购物网站(52) 泰国购物网站(30) 土耳其购物网站(10) 奥地利购物网站(28) 斯洛伐克购物网站(7) 葡萄牙购物网站(13) 阿联酋购物网站(26) 哥伦比亚购物网站(5) 沙特阿拉伯购物网站(9)
You might like
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
CentOS安装php v8js教程
2015/02/26 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
javascript中的new使用
2010/03/20 Javascript
基于Jquery的表格隔行换色，移动换色，点击换色插件
2010/12/22 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
最畅销的视频游戏享受高达90％的折扣：CDKeys
2020/02/10 全球购物
使用索引有什么好处
2016/07/27 面试题
仓库保管员岗位职责
2013/12/20 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
预备党员表决心书
2014/03/11 职场文书
贺卡寄语大全
2014/04/11 职场文书
申论倡议书范文
2014/05/13 职场文书
企业形象策划方案
2014/05/29 职场文书
二年级学生期末评语
2014/12/26 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript