jQuery validate插件功能与用法详解

<script type="text/JavaScript" src="/UploadFiles/2021-04-02/jquery-1.11.3.js">

因为jQuery插件是基于jQuery库基础之上的，因此在导入jQuery validate.js文件之前一定要先导入jQuery.js文件
(2) jQuery validate插件提供了$(form).validate(options)方法，本插件自带必填的数字，文字等验证规则
其中form表示表单元素名称，options表示调用validate方法时的配置对象，所有配置信息和异常信息显示的规则都包含在对象options中。
2.对于使用jQuery validate的方法有很多种，这里详细介绍通过表单元素名称来验证表单规则的方法。
即一种与HTML元素无直接联系，而是通过name属性来关联字段和验证规则的验证写法，这种方法可以实现行为与结构的分离。


<form id="form-sp">
 <fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" name="username" />
</p>
  <p class="tip"></p>
<p>
<label for="password">密&nbsp;码</label>
  <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
<label for="confirm-password">再输入</label>
<input type="password" name="confirm-password"/>
</p>
<p class="tip"></p>
  <label for="verify"></label>
  <input type="button" value="确定" name="verify" id="btn-ver"/>
  </fieldset>
</form>




这对上诉的HTML文件，我们可以写成如下验证规则：


$("#form-sp").validate({
rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},
messages:{
username:{
required:"请输入你的用户名",
minlength:"至少输入三位的用户名"
}
},
errorPlacement:function(error,element){
  error.appendTo(element.parent().next());
}
})




运行这段代码后，显示为

我们发现在自定义规则之后，表单自带了验证方法，下面我们来看validate对象中，具体属性的作用
（1）首先在rules属性中，我们根据表单的name，来确定各个表单元素的规则：
比如required:true
说明用户名这个表单元素，不能为空，
minlength:2，表示用户名至少为2位字符
maxlength:10，表示用户名至多为10位的字符
（2）其次在messages属性中，定义了当表单中的信息与规则不符合情况下的，错误提示信息，
如果不修改，默认为英文提示。在这里我们修改了username表单元素的required：属性的错误信息
因为在报错的时候会提示，“至少输入三位用户名”
3.了解jQuery validate插件的两个基本属性rules和messages，
下面jQuery validate默认校验表单：


  
    
      1
      required:true
      必须输入的字段。
    
    
      2
      remote:"check.php"
      使用 ajax 方法调用 check.php 验证输入值。
    
    
      3
      email:true
      必须输入正确格式的电子邮件。
    
    
      4
      url:true
      必须输入正确格式的网址。
    
    
      5
      date:true
      必须输入正确格式的日期。日期校验 ie6 出错，慎用。
    
    
      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。
    
  



这里对于各个校验元素就不一一分析
我们来分析来个有意思的校验元素
（1）equalTo
对于equalTo元素，使用方法为equalTo:"#filed"
在具体的使用时，只有当前的表单元素中的值与name为filed的表单元素的值相等时，返回true 不会报错，否则会报错，并显示错误提示信息，常见的应用是在注册界面验证两次输入密码是否一致，比如：


<p>
<label for="password">密&nbsp;码</label>
 <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
 <label for="confirm-password">再输入</label>
 <input type="password" name="confirm-password"/>
</p>




对于这个表单，有如下验证规则：


rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},




只有当name=confirm-password的表单元素，与name=password的表单元素值相等时，才不会报错，否则会显示错误提示信息。
（2）email校验元素，用于验证邮箱的格式
如果我们在上例中的表单验证信息中加入email:true那么会自动验证所输出的是否匹配邮箱格式，若不匹配则返回false并显示错误提示信息；

4.validate的其他方法
（1）用其他方法代替默认的submit方法


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




并且可以改变validate()对象的默认submit方法：


$.validate.setDefaults({
 submitHander:function(form){
 form.submit();
 }
})




(2)debug:只验证不提交表单
如果debug:true，则表单只验证不会提交，
同样也可以改变validate()对象的默认submit方法


$.validate.setDefaults({
 debug:true;
})




(3)更改错误信息的显示位置


errorPlacement:function(error,element){
 //第一个参数为错误提示信息，第二个参数为HTML中的元素
 error.appendTo(element.parent())
 //这里也可以直接写成类名的形式或者id名的形式
 //error.appendTo(".class")或者error.appendTo("#id");
}






  
    
      errorClass
      String
      指定错误提示的 css 类名，可以自定义错误提示的样式。
      "error"
    
    
      errorElement
      String
      用什么标签标记错误，默认是 label，可以改成 em。
      "label"
    
    
      errorContainer
      Selector
      显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。

      errorContainer: "#messageBox1, #messageBox2"
       
    
    
      errorLabelContainer
      Selector
      把错误信息统一放在一个容器里面。
       
    
    
      wrapper
      String
      用什么标签再把上边的 errorELement 包起来。
      
    
  





更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。