jQuery validate插件功能與用法詳解

更新時間：2016年12月15日 11:20:19 作者：小小小小小亮

這篇文章主要介紹了jQuery validate插件功能與用法,結(jié)合實例形式詳細分析了jQuery validate插件的功能、參數(shù)、使用方法與相關注意事項,需要的朋友可以參考下

本文實例講述了jQuery validate插件功能與用法。分享給大家供大家參考，具體如下：

前言：對于表單內(nèi)容格式的驗證，原生JS的寫法，較為繁瑣，筆者曾在寫一個注冊界面的時候，驗證郵箱格式，用戶名格式，密碼格式，多處使用了正則，并且錯誤提示信息也要用display:none/顯示隱藏，在用過jQuery validate插件后，則大大加快了開發(fā)速度！

1.jQuery validate插件提供了強大的驗證功能，jQuery validate插件的官網(wǎng)是http://jqueryvalidation.org/，官方網(wǎng)站上有詳細的文檔介紹了jQuery插件的使用方法。對于插件的使用

(1)首先下載jquery.validate.js插件

然后在HTML文件中插入

<script type="text/JavaScript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/js1.js"></script>

因為jQuery插件是基于jQuery庫基礎之上的，因此在導入jQuery validate.js文件之前一定要先導入jQuery.js文件

(2) jQuery validate插件提供了$(form).validate(options)方法，本插件自帶必填的數(shù)字，文字等驗證規(guī)則

其中form表示表單元素名稱，options表示調(diào)用validate方法時的配置對象，所有配置信息和異常信息顯示的規(guī)則都包含在對象options中。

2.對于使用jQuery validate的方法有很多種，這里詳細介紹通過表單元素名稱來驗證表單規(guī)則的方法。

即一種與HTML元素無直接聯(lián)系，而是通過name屬性來關聯(lián)字段和驗證規(guī)則的驗證寫法，這種方法可以實現(xiàn)行為與結(jié)構(gòu)的分離。

<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文件，我們可以寫成如下驗證規(guī)則：

$("#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());
}
})

運行這段代碼后，顯示為

我們發(fā)現(xiàn)在自定義規(guī)則之后，表單自帶了驗證方法，下面我們來看validate對象中，具體屬性的作用

（1）首先在rules屬性中，我們根據(jù)表單的name，來確定各個表單元素的規(guī)則：

比如required:true

說明用戶名這個表單元素，不能為空，

minlength:2，表示用戶名至少為2位字符

maxlength:10，表示用戶名至多為10位的字符

（2）其次在messages屬性中，定義了當表單中的信息與規(guī)則不符合情況下的，錯誤提示信息，

如果不修改，默認為英文提示。在這里我們修改了username表單元素的required：屬性的錯誤信息

因為在報錯的時候會提示，“至少輸入三位用戶名”

3.了解jQuery validate插件的兩個基本屬性rules和messages，

下面jQuery validate默認校驗表單：

1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調(diào)用 check.php 驗證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網(wǎng)址。
5	date:true	必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7	number:true	必須輸入合法的數(shù)字（負數(shù)，小數(shù)）。
8	digits:true	必須輸入整數(shù)。
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>

對于這個表單，有如下驗證規(guī)則：

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){
 //第一個參數(shù)為錯誤提示信息，第二個參數(shù)為HTML中的元素
 error.appendTo(element.parent())
 //這里也可以直接寫成類名的形式或者id名的形式
 //error.appendTo(".class")或者error.appendTo("#id");
}

errorClass	String	指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。	"error"
errorElement	String	用什么標簽標記錯誤，默認是 label，可以改成 em。	"label"
errorContainer	Selector	顯示或者隱藏驗證信息，可以自動實現(xiàn)有錯誤信息出現(xiàn)時把容器屬性變?yōu)轱@示，無錯誤時隱藏，用處不大。 errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer	Selector	把錯誤信息統(tǒng)一放在一個容器里面。
wrapper	String	用什么標簽再把上邊的 errorELement 包起來。