首页
所有分类
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 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
JavaScript基础篇（6）之函数表达式闭包
Dec 11 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
Vue组件化开发思考
Feb 02 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
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
说明书(38) 任命书(51) 委托书(259) 聘任书(31) 检举信(8) 竞聘书(31) 意向书(73) 公证书(45) 协议书(568) 担保书(46)
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
YII框架常用技巧总结
2019/04/27 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python正则表达式之作业计算器
2016/03/18 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
澳大利亚排名第一的在线酒类商店：MyBottleShop
2018/04/26 全球购物
英国领先的运动物理治疗供应公司：Vivomed
2018/07/14 全球购物
Cinque网上商店：德国服装品牌
2019/03/17 全球购物
State Cashmere官网：半零售价可持续蒙古羊绒
2020/02/26 全球购物
代办委托书怎样写
2014/04/08 职场文书
借款协议书范本
2014/04/22 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
博士生专家推荐信
2014/09/26 职场文书
先进班集体申报材料
2014/12/26 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python