本文實例講述了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表示調用validate方法時的配置對象，所有配置信息和異常信息顯示的規(guī)則都包含在對象options中。

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

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

<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">密 碼</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）equalTo

對于equalTo元素，使用方法為equalTo:"#filed"

在具體的使用時，只有當前的表單元素中的值與name為filed的表單元素的值相等時，返回true 不會報錯，否則會報錯，并顯示錯誤提示信息，常見的應用是在注冊界面驗證兩次輸入密碼是否一致，比如：

<p><label for="password">密 碼</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");}

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

希望本文所述對大家jQuery程序設計有所幫助。