首页
所有分类
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 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
原生js实现碰撞检测
Mar 12 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
GF515(1) SHARP(1) SRF-M100(1) 乐信(1) A254(1) RP2100(1) 德劲1107(1) 德劲1102(1) 安健(1) PL550(1)
You might like
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
yii操作session实例简介
2014/07/31 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
js跳转页面方法总结
2014/01/29 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python笔试面试题小结
2019/09/07 Python
python实现小世界网络生成
2019/11/21 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
python切割图片的示例
2020/11/12 Python
飞利浦比利时官方网站：Philips比利时
2016/08/24 全球购物
Tuckernuck官网：经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
房展策划方案
2014/06/07 职场文书
代办委托书怎么写
2014/08/01 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
宿舍管理制度范本
2015/08/07 职场文书
Win11 25163.1010更新补丁KB5016904推送，测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技