文档章节

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

百世经纶一页书梵天
 百世经纶一页书梵天
发布于 2016/12/01 20:36
字数 1574
阅读 13
收藏 0
点赞 0
评论 0
<!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>

导入相关的js

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

身份证号码验证js

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

 

© 著作权归作者所有

共有 人打赏支持
百世经纶一页书梵天
粉丝 3
博文 65
码字总数 46355
作品 0
海口
程序员

暂无相关文章

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 58分钟前 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部