jquery 验证 validate 插件

jquery validate 插件

 

 

正则表达式

 

.      匹配除换行符的任何字符

\w   匹配任何字母数字字符                  \W           匹配任何非字母数字字符

\s    匹配任何空白字符    \S            匹配任何非空白字符

\b    匹配一个单词的开始和结尾            \B            匹配非单词开始或结束的位置

^     匹配字符串的开始    \D            匹配任何非数字字符

$     匹配字符串的结尾            [^X]         匹配任何非X字符

\d    匹配任何数字            [^aeiou]     匹配任何不在aeiou中的字符

\i 区分大小写 例: rep = /^[a-z]/i

\g    表明可以进行全局匹配

 

*       匹配前面的子表达式零次或多次  例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}

+       匹配前面的子表达式一次或多次  例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}

?        匹配前面的子表达式零次或一次  例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}

{n}       重复n次

{n,}      至少重复n次

{n,m}   至少重复n次,最多m次

  -----------------------------------------------------------------------------------------

 

jquery自带的验证方法

(1)required:true               必输字段
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值，远程方法调用，
                               只允许后台返回true或者false
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期
(6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，
                               1998/01/22 只验证格式，不验证有效性
(7)number:true                 必须输入合法的数字(负数，小数)
(8)digits:true                 必须输入整数
(9)creditcard:                 必须输入合法的信用卡号
(10)equalTo:"#field"           输入值必须和#field相同
(11)accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")
                               (汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                      输入值不能大于5
(17)min:10                     输入值不能小于10

 

 

--------------------------------------------------------------------------------------------------------------

 

$(document).ready(function(){   

 

/* 设置默认属性 */   

$.validator.setDefaults({   

  submitHandler: function(form) { form.submit(); }   

});   

// 中文字两个字节   

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) || isIdCardNo(value);   

}, "请正确输入您的身份证号码");   

 

// 字符验证   

jQuery.validator.addMethod("userName", function(value, element) {   

  return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);   

}, "用户名只能包括中文字、英文字母、数字和下划线");   

 

// 手机号码验证   

jQuery.validator.addMethod("isMobile", function(value, element) {   

  var length = value.length;   

  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));   

}, "请正确填写您的手机号码");   

 

// 电话号码验证   

jQuery.validator.addMethod("isPhone", function(value, element) {   

  var tel = /^(\d{3,4}-?)?\d{7,9}$/g;   

  return this.optional(element) || (tel.test(value));   

}, "请正确填写您的电话号码");   

 

// 邮政编码验证   

jQuery.validator.addMethod("isZipCode", function(value, element) {   

  var tel = /^[0-9]{6}$/;   

  return this.optional(element) || (tel.test(value));   

}, "请正确填写您的邮政编码");   

$(regFrom).validate({   

/* 设置验证规则 */   

  rules: {   

   userName: {   

    required: true,   

    userName: true,   

    byteRangeLength: [3,15]   

   },   

   password: {   

    required: true,   

    minLength: 5   

   },   

   repassword: {   

    required: true,   

    minLength: 5,   

    equalTo: "#password"   

   },   

   question: {   

    required: true   

   },   

   answer: {   

    required: true   

   },   

   realName: {   

    required: true   

   },   

   cardNumber: {   

    isIdCardNo: true   

   },   

   mobilePhone: {   

    isMobile: true   

   },   

   phone: {   

    isPhone: true   

   },   

   email: {   

    required: true,   

    email: true   

   },   

   zipCode: {   

    isZipCode:true   

   }   

  },   

/* 设置错误信息 */   

  messages: {   

   userName: {   

    required: "请填写用户名",   

    byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"   

   },   

   password: {   

    required: "请填写密码",   

    minlength: jQuery.format("输入{0}.")   

   },   

   repassword: {   

    required: "请填写确认密码",   

    equalTo: "两次密码输入不相同"   

   },   

   question: {   

    required: "请填写您的密码提示问题"   

   },   

   answer: {   

    required: "请填写您的密码提示答案"   

   },   

   realName: {   

    required: "请填写您的真实姓名"   

   },   

   email: {   

    required: "请输入一个Email地址",   

    email: "请输入一个有效的Email地址"   

   }   

  },   

/* 错误信息的显示位置 */   

  errorPlacement: function(error, element) {   

   error.appendTo( element.parent() );   

  },   

/* 验证通过时的处理 */   

  success: function(label) {   

   // set   as text for IE   

   label.html(" ").addClass("checked");   

  },   

/* 获得焦点时不验证 */   

  focusInvalid: false,   

  onkeyup: false   

});   

 

// 输入框获得焦点时，样式设置   

$('input').focus(function(){   

  if($(this).is(":text") || $(this).is(":password"))   

   $(this).addClass('focus');   

  if ($(this).hasClass('have_tooltip')) {   

   $(this).parent().parent().removeClass('field_normal').addClass('field_focus');   

  }   

});   

 

// 输入框失去焦点时，样式设置   

$('input').blur(function() {   

  $(this).removeClass('focus');   

  if ($(this).hasClass('have_tooltip')) {   

   $(this).parent().parent().removeClass('field_focus').addClass('field_normal');   

  }   

});   

});