[jQuery]使用jQuery.Validate進行用戶端驗證（中級篇-上）——不使用微軟驗證控件的理由

jQuery.Validate為我們提供了3種驗證編寫方式，各有優缺點：

1、在input對象中書寫class樣式指定驗證規則或屬性驗證規則：

如<input type=”text” class=”required”/>

最簡單、最便捷，提示消息使用jQuery.Validate的内置的消息（自定義擴充驗證規則也屬于此項），但是由于是以樣式名的方式進行驗證，導緻了日後修改必須找到相應的input對象，同時無法使用進階驗證規則，具體說明請向下看

2、同第1條，這種驗證規則方式也是在input對象中書寫class樣式，隻不過書寫的方式改為了JSON格式，但是這種方式提供了自定義驗證消息的支援：

如<input type=”text” class="{required:true,minlength:5,,messages:{required:'請輸入内容'}”/>

簡單、友善，但個人認為有點臃腫，還是和第1條一樣和相對應的input對象糾纏在一起，并且還增加消息自定義，使得input對象變的更大了，幹擾了頁面代碼的閱讀，但可以使用進階驗證規則（實際就是将第3種JS以JSON的格式放到具體的class中

3、這種方式使用純JS的方式：

如： $().ready(function() {      $("#aspnetform").validate({           rules: {           name: "required",           email: {                   required: true,                   email: true           }      }) })

很好的解決了HTML和驗證規則的分離，就是書寫較為麻煩，需要單獨寫JS腳本，但好處是可以統一驗證規範，将每個頁面的驗證規則都寫在頭部的腳本中，友善日後維護。

注意：以上3種驗證方式的消息如果未指定都會預設調用内置的消息

在了解了jQuery.Validate為我們提供幾種驗證方式後，我們來具體分析下每個驗證方式：

第一種，在input對象中書寫class樣式指定驗證規則或屬性驗證規則，可以将該input需要的規則一次性寫在裡面（具體見頁面Middle-1.aspx）。

如: <asp:TextBox ID="txtAge" runat="server" class="required number" max="99" min="1"></asp:TextBox>

這段代碼的意思是必須輸入年齡字段，年齡必須是數字，同時必須在0-99範圍内，使用起來很友善寫幾個屬性就可以搞定，可以根據需求自由的組合驗證規則。

但是就如上面說的許多進階的驗證規則無法使用:

range（範圍驗證，這個就可以替代max,min），

rangeLength（長度範圍驗證，可以替代maxLength,minLength），

equalTo（比較驗證，這個其實可以用，但是如果使用使用的是ASP.NET控件就不行，純HTML控件可以。

看下代碼，我想比較2次輸入的密碼是否一樣時理論上可以這麼寫：

<asp:TextBox ID="txtRePwd" runat="server" TextMode="Password" CssClass="required" minlength="6" equalTo='#<%=txtPwd.ClientID %>'></asp:TextBox>

但是由于ASP.NET控件的機制問題，會把#<%=txtPwd.ClientID %>進行轉譯成#<%=txtPwd.ClientID %>這樣就導緻了要比較的ID無法正确擷取，導緻驗證不成功。

但如果這麼寫就不會出現問題：

<input type=”password” class=”required” minlenght=”6” equalTo=”txtPwd”/>

）

第二種，同樣書寫class驗證規則，隻不過以JSON格式書寫，可自定義驗證消息，進階驗證功能，JS驗證規則的簡化版（具體見頁面Middle-2.aspx）：

這種方式由于要以JSON的格式來編寫規則，是以需要引用個單獨的JS檔案：jquery.metadata.js

具體書寫代碼格式如下：

<asp:TextBox ID="txtUid" runat="server" CssClass="{required:true,messages:{required:'不輸入使用者名你怎麼登陸?'}}"></asp:TextBox> <asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不輸入密碼怎麼行呢?',minlength:'密碼太短啦至少6位'}}"></asp:TextBox>

具體意思分别是：必須輸入使用者名和必須輸入密碼同時長度至少6位。

注意：這邊我重新定義了驗證資訊，這樣就不用使用原先在jQuery.Validate中的内置的通用消息，可以指定更加人性化的消息，看下截圖（可以對比下内置提示資訊和自定義提示資訊）：

使用了這種方式後，我們就可以使用第一種驗證方式中無法使用的一些驗證規則了，如range：

<asp:TextBox ID="txtAge" runat="server" class="{required:true,number:true,range:[1,99],messages:{range:'您的年齡有問題把,得在1-99歲之間哦'}}"></asp:TextBox>

同樣我這邊也修改了具體具體的消息，而rangelength的用法也與這個類似我就不示範了。

同樣很遺憾的，由于ASP.NET控件特性問題equalTo在這也不能使用，HTML還是有效的。

第三種，使用JS進行規則驗證，可以使用所有驗證規則，并且可以試HTML代碼和驗證規則很好的分離，友善日後維護（具體代碼見Middle-3.aspx）

這種方式需要手寫JS來編寫驗證的規則，具體的格式如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <code>function InitRules() {</code> <code>    </code><code>opts = {</code> <code>         </code><code>rules:</code> <code>         </code><code>{</code> <code>                </code><code>&lt;%=txtUid.UniqueID %&gt;:</code> <code>                </code><code>{</code> <code>                    </code><code>required: true</code> <code>                </code><code>},</code> <code>                </code><code>&lt;%=txtPwd.UniqueID %&gt;:</code> <code>                    </code><code>required: true,</code> <code>                    </code><code>minlength: 6</code> <code>                </code><code>&lt;%=txtRePwd.UniqueID %&gt;:</code> <code>                    </code><code>minlength: 6,</code> <code>                    </code><code>equalTo:"#&lt;%=txtPwd.ClientID %&gt;"</code> <code>                </code><code>&lt;%=txtName.UniqueID %&gt;:</code> <code>                </code><code>&lt;%=txtAge.UniqueID %&gt;:</code> <code>                    </code><code>number: true,</code> <code>                    </code><code>range: [1,99]</code> <code>                </code><code>&lt;%=txtEmail.UniqueID %&gt;:</code> <code>                    </code><code>email: true</code> <code>                </code><code>}</code> <code>         </code><code>},</code> <code>         </code><code>messages:</code> <code>                    </code><code>required:"不輸入使用者名你怎麼登陸?"</code> <code>                    </code><code>required:"你不輸入密碼怎麼行呢?",</code> <code>                    </code><code>minlength:"密碼太短啦至少6位"</code> <code>                    </code><code>range:"您的年齡有問題把,得在1-99歲之間哦"</code> <code>         </code><code>}</code> <code>    </code><code>}</code> <code>}</code>

這種方式雖然可以使用所有的進階功能，驗證規則也分離出來了，但是就是書寫起來不簡便，是以我的個人建議是如果不是要求很高的情況下，可以将如required，number，email等正常的簡單的驗證規則使用第1種驗證方式，友善、快捷，隻有當第1種無法實行的時候才使用這種方式，如equalTo（比較驗證），remote（AJAX驗證）等，這樣互相結合效率是最高的。

到這邊可能會有人奇怪了，因為在上面介紹這種JS驗證方式的的時候有個小例子，需要把規則放入jQuery.Validate的方法中，否則制定的驗證規則是無效的。 這裡我就要說明下了，因為，這個例子中我使用的模拟一個項目的形式編寫的，頁面全部套用母版頁，是以為了滿足jQuery.Validate攔截form表單的方式，是以我在母版頁中的&lt;header&gt;定義了一個變量用來存放每個頁面中定義的驗證規則：var opts = null;，這樣根據HTML從上到下的解析方式首先opts被定義，然後在每個子頁面被指派，最後再傳回母版頁中的jQuery.Validate初始攔截form方法： jQuery(document).ready(function() {      if (opts != undefined || opts != null) {          jQuery("#&lt;%=form1.ClientID %&gt;").validate(opts);      } else {          jQuery("#&lt;%=form1.ClientID %&gt;").validate();      }  }); 如果在子頁面裡制定了規則，則按規則驗證，沒有規則則直接驗證（這邊的opts中包含的規則和具體的class規則不會有沖突，你可以将一部分規則寫在opts中（remote，equalTo），另外的規則寫在class中（required，number等）

以上就是使用jQuery.Validate進行用戶端驗證中級篇-上，具體的代碼請下載下傳源代碼進行檢視。

PS：1、本來想把中篇寫成一篇的，但是寫着寫着發現東西實在太多，寫在1篇裡會太多，是以分成了2篇寫，請見諒！

2、下一篇将對jQuery.Validate的使用過程中會碰到的問題進行介紹，如第2種驗證方式更改驗證規則所處的屬性、指定驗證資訊顯示位置等。

本文轉自kyo-yo部落格園部落格，原文連結：http://www.cnblogs.com/kyo-yo/archive/2010/06/29/Use-jQueryValidate-To-Being-Client-Validation.html，如需轉載請自行聯系原作者