jQuery中的validation插件有什么作用-创新互联

本篇内容介绍了“jQuery中的validation插件有什么作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

前面的话

最常使用javascript的场合就是表单的验证，而jQuery作为一个优秀的javascript库，也提供了一个优秀的表单验证插件——Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。本文将详细介绍validation插件

概述

jQuery Validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言

作为一个标准的验证方法库，Validation拥有以下特点：

1、内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号等19类内置验证规则

2、自定义验证规则：可以很方便地自定义验证规则

3、简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能

4、实时验证：可以通过keyup或blur事件触发验证

validation作为jQuery的一个插件，使用时需要同jQuery一起引入，注意要先引入jquery

快速上手

validation功能强大且API众多，如果要快速上手，只要掌握常用功能即可

 

  用户名：
  
 
 

  密码：
  
 
 

  
 
 

上述代码主要对name为'username'和'password'这两个input控件进行了校验，这两个控件必须填写内容，且字符长度必须在2-10之间

校验规则

在快速上手的例子中，使用了required、minlength和maxlength这三个校验规则。实际上validation的校验规则有17个之多

序号   规则      描述
   required:true    必须输入的字段
   remote:"check.php"  使用 ajax 方法调用 check.php 验证输入值
   email:true    必须输入正确格式的电子邮件
   url:true     必须输入正确格式的网址
   date:true     必须输入正确格式的日期，内部调用Date.parse()方法进行校验
   dateISO:true    必须输入正确格式的日期(ISO)，如：2009-06-23，1998/01/22
   number:true    必须输入合法的数字(负数，小数)
   digits:true    必须输入整数
   creditcard:    必须输入合法的信用卡号
   equalTo:"#field"   输入值必须和 #field 相同
   accept:     输入拥有合法后缀名的字符串(上传文件的后缀)
   maxlength:5    输入长度最多是 5 的字符串(汉字算一个字符)
   minlength:10    输入长度最小是 10 的字符串(汉字算一个字符)
   rangelength:[5,10]  输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)
   range:[5,10]    输入值必须介于 5 和 10 之间
   max:5      输入值不能大于 5
   min:10     输入值不能小于 10

下面使用一个更详细的例子，对上面的17个规则进行应用

 

  用户名：
  
 
 

  密码：
  
 
 

  确认密码
  
 
 

  电子邮件：
  
 
 

  网址：
  
 
 

  生日：
  
 
 

  随机数(0-9)：
  
 
 

  信用卡号：
  
 
 

  
 
 

默认提示

由上面的例子中看出，validate的默认提示是英文的

messages: {
 required: "This field is required.",
 remote: "Please fix this field.",
 email: "Please enter a valid email address.",
 url: "Please enter a valid URL.",
 date: "Please enter a valid date.",
 dateISO: "Please enter a valid date ( ISO ).",
 number: "Please enter a valid number.",
 digits: "Please enter only digits.",
 creditcard: "Please enter a valid credit card number.",
 equalTo: "Please enter the same value again.",
 maxlength: $.validator.format( "Please enter no more than {0} characters." ),
 minlength: $.validator.format( "Please enter at least {0} characters." ),
 rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
 range: $.validator.format( "Please enter a value between {0} and {1}." ),
 max: $.validator.format( "Please enter a value less than or equal to {0}." ),
 min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

不过可以将其修改为中文，只要加入以下代码

$.extend($.validator.messages, {
 required: "这是必填字段",
 remote: "请修正此字段",
 email: "请输入有效的电子邮件地址",
 url: "请输入有效的网址",
 date: "请输入有效的日期",
 dateISO: "请输入有效的日期 (YYYY-MM-DD)",
 number: "请输入有效的数字",
 digits: "只能输入数字",
 creditcard: "请输入有效的信用卡号码",
 equalTo: "你的输入不相同",
 extension: "请输入有效的后缀",
 maxlength: $.validator.format("最多可以输入 {0} 个字符"),
 minlength: $.validator.format("最少要输入 {0} 个字符"),
 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
 max: $.validator.format("请输入不大于 {0} 的数值"),
 min: $.validator.format("请输入不小于 {0} 的数值")
});

使用方式

上面的例子中，validate控件的使用，都是通过使用validate()方法完成的，由于这种方法将HTML结构和javascript逻辑分离，使得代码更加优化

实际上，还有另一种方法就是通过添加HTML属性的方式或添加class类名的方式来进行验证，类似于HTML5新增的input类控件的功能

由于已经将验证规则添加到HTML元素中，所以调用validate()方法时，参数为空

 

  用户名：
  
 
 

  电子邮件：
  
 
 

  网址：
  
 
 

  
 
 

更改提示

无论是validate插件自带的英文提示，或者是其扩展的中文提示，可能与实际项目的需求不相符。这时，就需要我们对错误提示进行更改

而更改错误提示的方法也很简单，只需要使用validate()函数里的，messages()方法即可。如果某个控件没有使用messages()方法，则使用默认的错误提示信息。如下所示

在messages()方法中，{0}代表rules()方法当前规则的属性值

 

  用户名：
  
 
 

  电子邮件：
  
 
 

  网址：
  
 
 

  
 
 

美化样式

实际上，validate插件输出错误信息的方式是通过增加一个label控件实现的，该label控件的id名为'输入控件的id名-error'，类名为'error'，且位于输入控件的右侧

下表中列出了关于错误信息的相关属性的方法

参数    　　类型  　　默认值  　　描述 
errorClass    String  "error"  指定错误提示的css类名 
errorElement  　　String  "label"  用什么标签标记错误 
errorContainer   Selector 　　 无   显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。如errorContainer: "#messageBox1, #messageBox2" 
errorLabelContainer Selector 　　无   把错误信息统一放在一个容器里面 
wrapper    String  　 无   用什么标签再把上边的errorELement包起来

【成功样式】

validate插件有一个success()方法，用来设置要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个css类，也可跟一个函数

success：String,Callback

success: function(label) {
 label.html(" ").addClass("success");
} 

success: "success"

但实际上，validate插件只是将label标签添加了一个'success'类，且原先的'error'类并没有删除。且经过实际测试，'error'类名无法删除，删除之后，每次验证成功时，validate插件都会自动再生成一个label标签

所以，success的效果无法正常使用，这应该是validate插件的一个bug

 

  用户名：
  
 
 

  电子邮件：
  
 
 

  网址：
  
 
 

  
 
 

自定义验证

由于需求的需要，除提供的默认验证规则外，还需要自定义验证规则，满足业务需要。这时就需要使用addMethod()方法

【addMethod(】

addMethod(name,method,message)方法用来添加一个新的验证方法

参数 name 是添加的方法的名字。参数 method 是一个函数，接收三个参数 (value,element,param)。value 是元素的值，element 是元素本身，param 是参数

以验证手机号为例，手机号一般是11位，前3位是号段，后8位一般没有限制。而且，在手机开头很可能有0或+86

//开头
(0|\+86)?
//前3位
13\d|14[579]|15[0-35-9]|17[0135-8]|18\d
//后8位
\d{8}
//手机号码
var phone = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;

$.validator.addMethod({
 'phone',
 function(value,element,param){
  var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
  return value.test(reg);
 },
 '请输入正确的手机号码'
})

 

  手机号码：
  
 
 

  
 
 

修改触发方式

下面的虽然是 boolean 型的，但建议除非要改为 false，否则别乱添加

触发方式 　　　　 类型 　　描述 　　　　　　　　　　　　　　　　　　　　　　　　默认值
onsubmit 　　　 Boolean 提交时验证。设置为 false 就用其他方法去验证 　　　　true
onfocusout 　　 Boolean 失去焦点时验证（不包括复选框/单选按钮） 　　　　　　　 true
onkeyup 　　　　Boolean 在 keyup 时验证。 　　　　　　　　　　　　　　　　　　true
onclick 　　　　Boolean 在点击复选框和单选按钮时验证 　　　　　　　　　　　　　true
focusInvalid 　Boolean 提交表单后，未通过验证的表单会获得焦点 　　　　　　 　 true
focusCleanup 　Boolean 如果是true，当未通过验证的元素获得焦点时，移除错误提示 false

远程校验

使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项

[注意]远程地址只能输出 "true" 或 "false"，不能有其他输出

remote: {
 url: "check-email.php",  //后台处理程序
 type: "post",    //数据发送方式
 dataType: "json",   //接受数据格式 
 data: {      //要传递的数据
  username: function() {
   return $("#username").val();
  }
 }
}

  

    请选择数字
    
      1
      2
      3
    
  
  

    
  
 

最后

validation插件的功能不只于此，但本文基本上把常用的功能进行了详细的介绍。如果要了解validation更高级的功能，请移步官方网站

最后介绍一个比较有趣的知识——validate、validation和validator，它们的中文意思是验证。validation插件的js文件名是validate.js，validation插件中最常用的方法就是validate()方法，基本上所有的验证操作都通过该方法进行。如果要进行自定义验证的话，则需要用到validator对象下的静态方法addMethod()

“jQuery中的validation插件有什么作用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站建设公司网站，小编将为大家输出更多高质量的实用文章！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。