登录
当前位置： 首页 > 编程笔记 >

jquery插件validation实现验证身份证号等

夏俊人
2023-03-14
本文向大家介绍jquery插件validation实现验证身份证号等，包括了jquery插件validation实现验证身份证号等的使用技巧和注意事项，需要的朋友参考一下

先推荐一个基于bootstrap的jQuery validation插件：http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/

jQuery validation添加验证规则

validata.html

<!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 Plugin验证插件手动验证

    本文向大家介绍jQuery Validation Plugin验证插件手动验证，包括了jQuery Validation Plugin验证插件手动验证的使用技巧和注意事项，需要的朋友参考一下 jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持。 正常的验证模式如下: 这样

  • jquery validation验证表单插件

    本文向大家介绍jquery validation验证表单插件，包括了jquery validation验证表单插件的使用技巧和注意事项，需要的朋友参考一下 jQuery验证表单插件——jquery-validation The jQuery Validation Plugin provides drop-in validation for your existing forms, while ma

  • jQuery插件Validation表单验证详解

    本文向大家介绍jQuery插件Validation表单验证详解，包括了jQuery插件Validation表单验证详解的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了jQuery插件Validation表单验证的具体实现代码，供大家参考，具体内容如下 功能 1.对”姓名“的必填和长度至少是两位的验证。 2.对“电子邮件”的必填和是否为E-mail格式的验证。 3.对“网址”是否为url的

  • js实现二代身份证号码验证详解

    本文向大家介绍js实现二代身份证号码验证详解，包括了js实现二代身份证号码验证详解的使用技巧和注意事项，需要的朋友参考一下 废话少说，直接上代码，注释里解析的很清楚了，这里就不BB了。 怎么样，非常全面第一个身份证号码验证代码吧，和网上搜来的其他验证代码简直不是一个次元的，小伙伴们需要的直接拿走用吧。

  • 详解jQuery的表单验证插件--Validation

    本文向大家介绍详解jQuery的表单验证插件--Validation，包括了详解jQuery的表单验证插件--Validation的使用技巧和注意事项，需要的朋友参考一下 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用

  • Java实现身份证号码验证源码示例分享

    本文向大家介绍Java实现身份证号码验证源码示例分享，包括了Java实现身份证号码验证源码示例分享的使用技巧和注意事项，需要的朋友参考一下 整理文档，搜刮出一个Java实现身份证号码验证源码示例代码，稍微整理精简一下做下分享。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

相关阅读

详解jQuery的表单验证插件--ValidationJava实现身份证号码验证源码示例分享javascript实现验证身份证号的有效性并提示jquery 校验中国身份证号码实例详解Python实现身份证号码解析

相关文章

XML 验证华为软件验证/西安Java正则表达式验证电话号码PHP 表单 - 验证邮件和URLAngularJS 输入验证

相关问答

Spring Boot的基本身份验证实现Grails 2.3.3 Spring Security插件身份验证失败AWS Lambda/Cognito身份验证-假设身份验证角色Firebase身份验证API电子邮件验证JavaScriptDynamics 365身份验证

相关工具

Jquery表单验证插件易优安身份认证jQuery-validationjQuery Inline Form Validation EngineASP.NET语音验证码

相关文档

如何编写 jQuery 插件如何实现自己的 jQueryPython 取证中文教程Windows 证书管理 帮助文档WordPress 插件开发
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.