在上一篇文章使用jQuery.Validate進(jìn)行客戶(hù)端驗證（中級篇-上）中我介紹了jQuery.Validate的3種驗證方式，今天這篇中級-下則是在上一篇的基礎上繼續介紹jQuery.Validate的一些常用的驗證使用方法。
今天主要以使用jQuery.Validate后會(huì )遇到的問(wèn)題為介紹內容，主要介紹以下幾點(diǎn)：
1、在使用上一篇中第2種方式，以JSON的格式編寫(xiě)驗證規則，影響了正常的class使用，如何處理？
2、在A(yíng)SP.NET下，所有的按鈕都會(huì )提交form表單，所以都會(huì )引發(fā)驗證，如何處理？
3、我希望驗證的提示信息可以在統一的地方顯示，如何處理？
4、我在開(kāi)發(fā)的過(guò)程中，我不確定所編寫(xiě)的規則是否正確，如何進(jìn)行調試？
5、我使用的是微軟AJAX控件，想監控dropdownlist是否選擇，為何不起作用?
6、radiobox，checkbox，listbox如何進(jìn)行高級應用？如何指定選擇數量？
來(lái)看下第1點(diǎn)：在使用上一篇中第2種方式，以JSON的格式編寫(xiě)驗證規則，影響了正常的class使用，如何處理？（具體見(jiàn)Middle-4.aspx）
首先看下使用第2種方式是如何編寫(xiě)驗證規則的：
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不輸入密碼怎么行呢?',minlength:'密碼太短啦至少6位'}}"></asp:TextBox>
可以看到這樣寫(xiě)驗證規則雖然簡(jiǎn)單，但是如果我要為這個(gè)控件應用其他樣式怎么辦？所以現在就是處理這個(gè)問(wèn)題的時(shí)候了，在頁(yè)面的頭部加上一句代碼：
jQuery.metadata.setType("attr", "validate");
由于這種驗證規則方式需要依賴(lài)jQuery.metadata才可以正常運作，所以我們需要在jQuery.metadata上做文章，分析下jQuery.metadata的代碼，可以看到，默認情況下它是檢測控件的class屬性：
defaults : {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
}
那我們可不可以更改這個(gè)屬性呢？肯定是可以的，就是在頁(yè)面上加上那句代碼，更改其檢測的屬性。
接著(zhù)我們還需要修改下頁(yè)面中的代碼，將原來(lái)所有的"CssClass”改為我們更改的檢測屬性"validate”、
這樣就很好的更改了驗證規則所存放的屬性了。
第2點(diǎn)：在A(yíng)SP.NET下，所有的按鈕都會(huì )提交form表單，所以都會(huì )引發(fā)驗證，如何處理？（具體見(jiàn)Middle-4.aspx中btnNoValidate按鈕）
在實(shí)際的開(kāi)發(fā)當中，一個(gè)頁(yè)面上總會(huì )有N個(gè)按鈕，由于A(yíng)SP.NET的機制特性，所有的控件都會(huì )回發(fā)頁(yè)面，也就提交了表單，但是此時(shí)整個(gè)表單都被jQuery.Validate所監控，所以只要頁(yè)面中有某個(gè)地方不符合驗證規則，任何回發(fā)頁(yè)面的操作都會(huì )被攔截住，但是實(shí)際上我們需要引發(fā)驗證的按鈕只有1或者2個(gè)，而其他按鈕不需要，這時(shí)我們就要想辦法了。
其實(shí)很簡(jiǎn)單，就是為不需要引發(fā)驗證的控件加個(gè)樣式"cancel"即可，代碼如下：
<asp:Button ID="btnNoValidate" runat="server" Text="點(diǎn)我不會(huì )引發(fā)驗證哦" CssClass="cancel" />
怎么樣很簡(jiǎn)單吧？
第3點(diǎn)：我希望驗證的提示信息可以在統一的地方顯示，如何處理？（具體見(jiàn)Middle-5.aspx）
在開(kāi)發(fā)的過(guò)程當中，會(huì )有一些特殊的需求，就比如頁(yè)面上使用了tab頁(yè)面，而提交按鈕就一個(gè)，這時(shí)就需要將驗證提示信息統一放在一個(gè)位置，好方便查看，如圖：
要實(shí)現這個(gè)效果只需在JS編寫(xiě)驗證規則時(shí)添加：
errorPlacement: function(error, element) {
error.html(error.html()+"<br/>");
error.appendTo("#errorContainer");
}
error是一個(gè)label對象里面包含了錯誤消息，element則是驗證未通過(guò)的對象元素，通過(guò)errorPlacement可以方便的將驗證提示信息統一放入一個(gè)位置。
第4點(diǎn)：我在開(kāi)發(fā)的過(guò)程中，我不確定所編寫(xiě)的規則是否正確，如何進(jìn)行調試？（具體見(jiàn)Middle-5.aspx）
這個(gè)就比較簡(jiǎn)單了，jQuery.Validate默認已經(jīng)為我們考慮過(guò)了，只需在JS編寫(xiě)規則時(shí)添加一個(gè)屬性：
debug:true
這樣就表示現在在調試，這時(shí)不會(huì )提交表單。
第5點(diǎn)：我使用的是微軟AJAX控件，想監控dropdownlist是否選擇，為何不起作用?（具體見(jiàn)Middle-5.aspx中的性別）
在使用微軟AJAX控件中的dropdownlist級聯(lián)時(shí)，比如省市區聯(lián)動(dòng)，如果省沒(méi)有選擇，則市和區都是灰的，是disabled狀態(tài)，是被禁用的，類(lèi)似代碼如下：
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="required" disabled="true">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="1">男</asp:ListItem>
<asp:ListItem Value="0">女</asp:ListItem>
</asp:DropDownList>
我這邊是強制把這個(gè)DropDownList禁用了，這時(shí)如果為這個(gè)控件加上“required”將不會(huì )有任何反應，因為在jQuery.Validate代碼中默認是不驗證的，具體代碼見(jiàn)jQuery.Validate.js414行：
not(":submit, :reset, :image, [disabled]")
所以為了方便我們使用，我們修改下代碼，將[disabled]"去除，改為：
not(":submit, :reset, :image")
這樣再刷新下頁(yè)面，驗證就起作用了。
第6點(diǎn)：radiobox，checkbox，listbox如何進(jìn)行高級應用？如何指定選擇數量？（具體請見(jiàn)radio-checkbox-select-demo.html）
這點(diǎn)我直接引用了官方關(guān)于radiobox，checkbox，listbox應用的例子，因為官方的例子已經(jīng)寫(xiě)的非常好了。
以上就是使用jQuery.Validate進(jìn)行客戶(hù)端驗證中級篇-下，本文就jQuery.Validate在使用上遇到的問(wèn)題進(jìn)行了介紹（都是我在實(shí)際項目中碰到的，進(jìn)行一個(gè)總結，難免有遺漏，如果有過(guò)jQuery.Validate開(kāi)發(fā)經(jīng)驗的朋友歡迎指點(diǎn)），具體可以下載源代碼查看。
聯(lián)系客服
