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

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

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

(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>

因?yàn)閖Query插件是基于jQuery庫基礎(chǔ)之上的，因此在導(dǎo)入jQuery validate.js文件之前一定要先導(dǎo)入jQuery.js文件

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

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

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

即一種與HTML元素?zé)o直接聯(lián)系，而是通過name屬性來關(guān)聯(lián)字段和驗(yàn)證規(guī)則的驗(yàn)證寫法，這種方法可以實(shí)現(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>

這對(duì)上訴的HTML文件，我們可以寫成如下驗(yàn)證規(guī)則：

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

運(yùn)行這段代碼后，顯示為

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

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

比如required:true

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

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

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

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

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

因?yàn)樵趫?bào)錯(cuò)的時(shí)候會(huì)提示，“至少輸入三位用戶名”

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

下面jQuery validate默認(rèn)校驗(yàn)表單：

我們來分析來個(gè)有意思的校驗(yàn)元素

（1）equalTo

對(duì)于equalTo元素，使用方法為equalTo:"#filed"

在具體的使用時(shí)，只有當(dāng)前的表單元素中的值與name為filed的表單元素的值相等時(shí)，返回true 不會(huì)報(bào)錯(cuò)，否則會(huì)報(bào)錯(cuò)，并顯示錯(cuò)誤提示信息，常見的應(yīng)用是在注冊(cè)界面驗(yàn)證兩次輸入密碼是否一致，比如：

<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>

對(duì)于這個(gè)表單，有如下驗(yàn)證規(guī)則：

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

只有當(dāng)name=confirm-password的表單元素，與name=password的表單元素值相等時(shí)，才不會(huì)報(bào)錯(cuò)，否則會(huì)顯示錯(cuò)誤提示信息。

（2）email校驗(yàn)元素，用于驗(yàn)證郵箱的格式

如果我們?cè)谏侠械谋韱悟?yàn)證信息中加入email:true那么會(huì)自動(dòng)驗(yàn)證所輸出的是否匹配郵箱格式，若不匹配則返回false并顯示錯(cuò)誤提示信息；

4.validate的其他方法

（1）用其他方法代替默認(rèn)的submit方法

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

并且可以改變validate()對(duì)象的默認(rèn)submit方法：

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

(2)debug:只驗(yàn)證不提交表單

如果debug:true，則表單只驗(yàn)證不會(huì)提交，

同樣也可以改變validate()對(duì)象的默認(rèn)submit方法

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

(3)更改錯(cuò)誤信息的顯示位置

errorPlacement:function(error,element){
 //第一個(gè)參數(shù)為錯(cuò)誤提示信息，第二個(gè)參數(shù)為HTML中的元素
 error.appendTo(element.parent())
 //這里也可以直接寫成類名的形式或者id名的形式
 //error.appendTo(".class")或者error.appendTo("#id");
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

最新評(píng)論