首页
所有分类
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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
Bootstrap每天必学之轮播（Carousel）插件
Apr 25 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
微信小程序商城项目之购物数量加减（3）
Apr 17 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
jQuery实现朋友圈查看图片
Sep 11 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
立体声(1) KDKA(1) 中波(3) SWL(1) 调频(4) ad hoc(1) Harman Kardon(1) FM(4) 调幅(1) GWEN(1)
You might like
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
python中元类用法实例
2014/10/10 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
python常量折叠基础知识点讲解
2021/02/28 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
手工制作的男士奢华英国鞋和服装之家：Goodwin Smith
2019/06/21 全球购物
光声世纪笔试题目
2012/08/25 面试题
高中数学教师求职信
2013/10/30 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
红色电影观后感
2015/06/18 职场文书
公务员处分决定书
2015/06/25 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL