`

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');   

  }   

});   

});   

 

分享到:
评论

相关推荐

    jQuery的validate插件使用整理

    jQuery的validate插件是一款强大的表单验证工具,它能够帮助开发者轻松地实现用户输入的验证,确保数据的正确性和完整性。基于jQuery库,validate插件提供了丰富的功能,包括内置的验证规则、自定义验证方法、错误...

    jquery.validate1.7验证插件最新版

    在项目中使用jQuery Validate,首先需要确保已引入jQuery库,然后引入validate插件的JS文件。例如: ```html &lt;script src="https://code.jquery.com/jquery-1.x.min.js"&gt;&lt;/script&gt; &lt;script src="jquery.validate....

    jquery.validate.min.js

    jquery.validate.min.js jquery jquery验证插件 validate

    jquery.validate插件remote规则相同值不验证的问题解决办法

    jquery.validate插件remote规则相同值不验证的问题解决办法.方法绝对有效

    jQuery.validate插件(附代码实例)

    jQuery.validate插件是jQuery库的一个强大验证工具,用于在客户端实现表单数据的验证,它大大简化了网页表单验证的复杂性。该插件提供了一系列内置规则和自定义规则,能够灵活地验证用户输入的数据,确保数据的有效...

    Jquery.validate插件使用方法

    1. **引入资源**:在项目中,首先需要引入jQuery库和jQuery.validate插件的js文件,通常包括`jquery.js`、`jquery.validate.js`以及可选的`additional-methods.js`(包含了一些额外的验证方法)。 2. **初始化验证*...

    jquery-validate 验证插件

    `jQuery Validate`插件是实现前端表单验证的强大工具,它简化了验证逻辑,提供了丰富的自定义选项,使得开发者可以灵活地构建符合项目需求的验证机制。通过深入理解和实践,我们可以利用这个插件提升Web应用的质量和...

    jQuery.validate验证

    jQuery.validate还支持许多插件,如additional-methods.js,它包含了更多验证方法,如`alpha`, `alnum`, `lettersonly`等。 7. **异步验证**: `remote`规则可以用来进行服务器端验证,通过AJAX请求向服务器发送...

    Jquery validate和form插件

    `jQuery validate` 和 `jQuery form` 插件是 jQuery 生态系统中的两个重要工具,它们分别用于增强表单验证和实现 AJAX 无刷新提交,从而提供更流畅的用户体验。 **jQuery validate 插件** `jQuery validate` 是一...

    jquery validate表单验证插件制作注册表单提交验证

    在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...

    功能强大的jquery.validate表单验证插件

    要使用jquery.validate插件实现表单验证,首先需要引入jQuery库以及jquery.validate插件的相关文件。在引入文件时,应注意文件的加载顺序,如示例中所示,首先加载jQuery库,然后是jquery.validate插件文件,最后...

    JQuery Validate插件的验证规则和例子,合成AJAX

    jQuery Validate插件是用于在客户端进行表单验证的强大工具,它提供了丰富的验证规则和自定义方法,使得用户在提交表单前可以即时检测输入数据的有效性,大大提升了用户体验。该插件是jQuery库的一个扩展,通过简单...

    jQuery_validate插件

    总结,jQuery Validate插件为前端开发提供了强大的表单验证功能,通过灵活的规则设置、自定义验证方法、事件处理以及样式控制,能有效提高用户体验,确保数据的准确性。结合提供的示例和JS文件,开发者可以轻松地将...

    jQuery Validate插件验证表单小练

    在这个“jQuery Validate插件验证表单小练”中,我们将深入探讨该插件的基本用法、核心功能以及如何在实际项目中应用。 首先,jQuery Validate 插件的核心在于它的验证规则。这些规则可以设置为必填(required)、...

    jQuery的validate插件使用整理(精).docx

    jQuery的validate插件是一个强大的表单验证工具,它为开发者提供了便捷的方式来验证用户输入的数据,确保数据的准确性和安全性。本文将深入讲解jQuery.validate插件的基本使用方法和常见验证规则,以及如何自定义...

    jQuery Validate表单验证插件

    jQuery Validate插件极大地简化了前端表单验证的实现,使得开发者能够专注于构建功能丰富的交互式Web应用,而无需担心数据验证的复杂性。通过熟练掌握其核心功能和自定义规则,您可以创建高效且用户体验良好的表单...

    jQuery.validate 用法

    jQuery.validate插件是一个强大的、易于使用的JavaScript库,它使得在jQuery环境下进行表单验证变得简单而高效。本文将深入探讨jQuery.validate的使用方法以及源码解析,帮助开发者更好地理解和运用这一工具。 首先...

    jquery的validate表单校验插件

    jQuery的validate插件作为一款强大的表单验证工具,因其易用性和灵活性而备受开发者喜爱。本文将深入探讨该插件的使用方法、特性以及如何实现自定义验证规则。 首先,jQuery validate插件是基于流行的JavaScript库...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    在本文中,我们将深入探讨`jQuery Validate`插件的一个实用示例,该示例涉及到密码验证,同时还提供了密码强度的实时显示。`jQuery Validate`是一个非常流行且功能强大的JavaScript库,用于验证HTML表单中的输入数据...

Global site tag (gtag.js) - Google Analytics