文档章节

jquery validation验证身份证号、护照、电话号码、email

Gtwo
 Gtwo
发布于 2015/12/22 10:28
字数 1569
阅读 4937
收藏 15

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;
	} 
};


© 著作权归作者所有

共有 人打赏支持
Gtwo
粉丝 1
博文 42
码字总数 35045
作品 0
中山
程序员
私信 提问
加载中

评论(1)

狂奔的小牛
狂奔的小牛
很赞
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
怎么给有效身份证件类型加判断 jQuery

用jQuery正则表达式验证证件类型,有效身份证件类型:临时身份证、身份证、军官证、学员证、警官证、工作证、护照、各职业的相关资格证等,验证有效证件类型时后面的证件号码也要匹配。

qqq11
2016/08/22
391
3
20 个增强表单功能的 jQuery 插件

1) jQtransform jQuery Plugin 对表单进行外观美化的插件 2) Live Validation LiveValidation 是一个轻量的表单验证库。除了传统的验证功能,还提供实时验证,可以一边输入一遍验证。Ruby on...

红薯
2012/02/15
3.3K
2
jquery验证手机号码、邮箱格式是否正确示例代码

//jquery验证邮箱 function checkSubmitEmail() { if ($("#email").val() == ""){ //$("#confirmMsg").html("<font color='red'>邮箱地址不能为空!</font>"); alert("邮箱不能为空!") $("#e......

易水寒丶开源
2015/11/02
0
0
客户端验证的极品--jQuery.validator

最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate。 它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有...

无聊的人们啊
2012/05/27
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Mysql(Mariadb)数据库主从复制

Mysql主从复制的实现原理图大致如下: MySQL之间数据复制的基础是以二进制日志文件(binary log file)来实现的,一台MySQL数据库一旦启用二进制日志后,其作为master,它数据库中所有操作都...

linux-tao
53分钟前
2
0
Mysql(Mariadb)数据库主从复制

Mysql主从复制的实现原理图大致如下: MySQL之间数据复制的基础是以二进制日志文件(binary log file)来实现的,一台MySQL数据库一旦启用二进制日志后,其作为master,它数据库中所有操作都...

Linux就该这么学
今天
2
0
Mysql(Mariadb)数据库主从复制

Mysql主从复制的实现原理图大致如下: MySQL之间数据复制的基础是以二进制日志文件(binary log file)来实现的,一台MySQL数据库一旦启用二进制日志后,其作为master,它数据库中所有操作都...

xiangyunyan
今天
2
0
Android 自定义Path贝塞尔曲线View实践——旋转的花朵

一、关于贝塞尔曲线 在工业设计方面贝塞尔曲线有很多用途,同样,在Android中,贝塞尔曲线结合Path类可以实现更复杂的图形,这里我们给一个案例,来实现一种旋转的花朵。对于贝赛尔曲线的理解...

IamOkay
今天
3
0
7、redis主从复制和sentinel配置高可用

一:redis主从配置 1、环境准备 master : 192.168.50.10 6179 slave1: 192.168.50.10 6279 slave2: 192.168.50.10 6379 2、redis.conf配置文件配置 master port 6179......

刘付kin
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部