Jquery的各种验证
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <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;
- }
- };
- span>
Jquery的各种验证的更多相关文章
- jquery.validate 使用--验证表单隐藏域
jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...
- 封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- JQuery EasyUI validatebox(验证框)
JQuery EasyUI validatebox(验证框) http://www.easyui.info/archives/602.html
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jquery/js实现验证聚焦，失焦
jquery实现验证聚焦,失焦方法: 我还是喜欢用jquery来实现,不管页面中多少个输入框需要实现聚焦,失焦,都公有,我常用的方法是: 遍历该页面中的input框,获取输入框中的val值,当该输入框 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- spring MVC、mybatis配置读写分离
spring MVC.mybatis配置读写分离 1.环境: 3台数据库机器,一个master,二台slave,分别为slave1,slave2 2.要实现的目标: ①使数据写入到master ②读数 ...
- JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...
- 超炫数字特效动画AE模板
下载方式: 网盘地址+迅雷地址+迅雷地址+备份地址 <ignore_js_op> 本AE模板是由Videohive机构出品的超炫数字特效动画AE模板,Videohive The Numbe ...
- php : 基础(1)
php基本语法形式 1.php的标记符 有以下形式: 形式1(推荐): <?php 这里要写符合php语法的语句 ?> 形式2: <script language="php ...
- jsp发布:Could not publish server configuration: null. java.lang.NullPointerException
1.jsp发布: Could not publish server configuration: null. java.lang.NullPointerException
- [地图SkyLine二次开发]框架(3)
上节将显示我们地图的OBJECT控件,布了一下局,但地图没有进行加载. 这是因为我们要在另一个页面,对OBJECT控件进行地图加载,并且得到该控件的sgworld,以便对其进行我们想要的开发. 这里, ...
- python成长之路【第十三篇】：Python操作MySQL之pymysql
对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎 ...
- Map拷贝 关于对象深拷贝 浅拷贝的问题
问题:map拷贝时发现数据会变化. 高能预警,你看到的下面的栗子是不正确的,后面有正确的一种办法,如果需要看的话的,请看到底,感谢各同学的提醒,已做更正,一定要看到最后 先看例子: ...
- SQL Server Reporting Service(SSRS) 第二篇 SSRS数据分组Parent Group
SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子默认使用Table进行简单的数据显示,有时为了进行更加直观的数据显示,我们需要按照某个字段对列表进行 ...
- JS 劫持来源网站并做指定跳转
有时候给网站做流量,免不了要做一些网站劫持的JS跳转,这里贴上一段劫持来源网站的JS跳转方法,很简单 <script> // 获取来源网站 var slyar = document.ref ...