在上一篇使用jQuery.Validate進(jìn)行客戶端驗(yàn)證（中級篇-下）中我介紹了jQuery.Validate在日常使用的過程中會遇到哪些問題及解決辦法，今天的高級篇則主要是對jQuery.Validate的一些高級應(yīng)用進(jìn)行介紹。
本篇主要介紹為以下2點(diǎn)：
1、擴(kuò)展驗(yàn)證規(guī)則，jQuery.Validate只提供了一些基本的驗(yàn)證功能，并不能滿足我們?nèi)粘ｉ_發(fā)的需求，所以我們要為jQuery.Validate擴(kuò)展驗(yàn)證規(guī)則。
2、分組驗(yàn)證，在開發(fā)的時候有時會遇到的一個問題就是，不同按鈕引發(fā)不同的驗(yàn)證。
首先來介紹下第一點(diǎn)：擴(kuò)展驗(yàn)證規(guī)則，在jQuery.Validate默認(rèn)的驗(yàn)證規(guī)則無法滿足我們的日常開發(fā)需求的時候，我們需要根據(jù)自己的業(yè)務(wù)需求指定一些相應(yīng)的規(guī)則。（具體見MasterPage.master）
為了擴(kuò)展驗(yàn)證規(guī)則，我們首先要看下jQuery.Validate為我們提供的擴(kuò)展方法：
addMethod: function(name, method, message) {
$.validator.methods[name] = method;
$.validator.messages[name] = message;
if (method.length < 3) {
$.validator.addClassRules(name, $.validator.normalizeRule(name));
}
},
這段代碼就是用來擴(kuò)展驗(yàn)證規(guī)則的，意思很簡單，就是向jQuery.Validate添加驗(yàn)證方法。
接收3個參數(shù)：name-驗(yàn)證規(guī)則名
method-驗(yàn)證規(guī)則實(shí)現(xiàn)函數(shù)（function）
message-驗(yàn)證不通過顯示的錯誤消息
當(dāng)我們調(diào)用了這個方法后，我們所寫的規(guī)則自動就會加入到j(luò)Query.Validate規(guī)則中。
好了，我們看下具體如何實(shí)現(xiàn)：
手機(jī)號碼驗(yàn)證：
jQuery.validator.addMethod("telphoneValid", function(value, element) {
var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/;
return tel.test(value) || this.optional(element);
}, "請輸入正確的手機(jī)號碼");
這邊的method需要注意的是，這個method實(shí)現(xiàn)函數(shù)接收2個元素：
value：檢測的對象的值
element：檢測的對象
這邊我定義了一個名為“telphoneValid”的驗(yàn)證規(guī)則，在驗(yàn)證規(guī)則里我首先定義了個手機(jī)驗(yàn)證的正則表達(dá)式，然后將值放入正則表達(dá)式進(jìn)行驗(yàn)證，返回驗(yàn)證結(jié)果，返回的錯誤消息是“請輸入正確的手機(jī)號碼”。
這樣就完成了一個簡單的手機(jī)號碼驗(yàn)證規(guī)則擴(kuò)展。
其實(shí)這邊也可以把擴(kuò)展規(guī)則放到一個當(dāng)單獨(dú)的JS中方便以后重用，但因?yàn)檫@邊僅僅是演示，我就把擴(kuò)展方法放到母版頁中了。
注意：我這邊的擴(kuò)展方法是放在jQuery(document).ready()中的，這樣可以保證每次頁面加載完畢后的時候，自定義的驗(yàn)證規(guī)則可以被加載進(jìn)jQuery.Validate中。
接下來說下第2點(diǎn)：分組驗(yàn)證，這個分組驗(yàn)證在默認(rèn)的jQuery.Validate中默認(rèn)是不支持的，也是我覺得很不爽的，因?yàn)樵趯?shí)際的開發(fā)過程中經(jīng)常會碰到需要分組驗(yàn)證的時候。
這點(diǎn)微軟的驗(yàn)證控件就做的很好，在微軟的控件里，默認(rèn)都有ValidationGroup這個屬性，只要把屬性名設(shè)置為相同就可以進(jìn)行分組驗(yàn)證了，但是jQuery.Validate自身卻沒提供這個功能，所以我們只能自己擴(kuò)展了。
來一下具體的場景，在一個頁面里有2個tab頁面，不同tab頁面需要不同的提交按鈕：
這2個就是標(biāo)準(zhǔn)的分組驗(yàn)證情況，如果不設(shè)置分組驗(yàn)證的情況下，點(diǎn)擊[基本信息提交]和[描述提交]按鈕后頁面上所有的驗(yàn)證都會被相應(yīng)，這是因?yàn)?個按鈕都在一個form表單中，2個按鈕的點(diǎn)擊事件默認(rèn)都是在客戶端提交表單，然后由服務(wù)器端來分配執(zhí)行代碼，所以問題就出現(xiàn)了。
這時我們就需要引入分組驗(yàn)證了，這個解決思路是我在一個國外的網(wǎng)站找到的，不過具體地址我找不到了，這個方法有個弊端就是必須是將需要分組的控件必須放入不同的容器中，如div,table等，因?yàn)椴捎玫氖菢?biāo)識class樣式來進(jìn)行分組驗(yàn)證。
看下具體代碼：
02 | function InitValidationGroup() { |
03 | $('.validationGroup .causesValidation').click(Validate); |
05 | $('.validationGroup :text').keydown(function(evt) { |
06 | if (evt.keyCode == 13) { |
07 | var $nextInput = $(this).nextAll(':input:first'); |
09 | if ($nextInput.is(':submit')) { |
19 | function Validate(evt) { |
20 | var $group = $(this).parents('.validationGroup'); |
22 | $group.find(':input').each(function(i, item) { |
上面的代碼就是用來進(jìn)行分組驗(yàn)證的初始化的，這段代碼會找尋頁面中標(biāo)有validationGroup樣式的元素（分組的容器），然后在這個元素中找?guī)ausesValidation樣式的元素（這個元素是引發(fā)驗(yàn)證的按鈕），
上面代碼實(shí)現(xiàn)分組驗(yàn)證的邏輯就是當(dāng)帶causesValidation樣式的元素引發(fā)驗(yàn)證后會找尋這個元素的父級validationGroup元素，然后遍歷validationGroup元素下的所有有驗(yàn)證規(guī)則的元素判斷是否驗(yàn)證通過。
頁面代碼:
03 | <li><a href="#baseinfo">基本信息</a></li> |
04 | <li><a href="#personaldesc">個人描述</a></li> |
06 | <div id="baseinfo" class="validationGroup"> |
07 | <table cellpadding="1" cellspacing="1" border="1" width="50%" align="center"> |
13 | <asp:TextBox ID="txtUid" runat="server"></asp:TextBox> |
21 | <asp:TextBox ID="txtPwd" ValidationGroup="" TextMode="Password" runat="server"></asp:Text |
29 | <asp:TextBox ID="txtRePwd" TextMode="Password" runat="server"></asp:TextBox> |
37 | <asp:TextBox ID="txtName" runat="server"></asp:TextBox> |
45 | <asp:TextBox ID="txtAge" runat="server"></asp:TextBox> |
53 | <asp:DropDownList ID="DropDownList1" runat="server" CssClass="required" disabled="true"> |
54 | <asp:ListItem></asp:ListItem> |
55 | <asp:ListItem Value="1">男</asp:ListItem> |
56 | <asp:ListItem Value="0">女</asp:ListItem> |
65 | <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> |
70 | <asp:Button ID="Button3" runat="server" Text="基本信息提交" CssClass="causesValidation"/> |
75 | <div id="personaldesc" class="validationGroup"> |
77 | <asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Width="500px" |
78 | Height="100px"></asp:TextBox> |
80 | <asp:Button ID="Button1" runat="server" Text="描述提交" CssClass="causesValidation"/> |
84 | <script type="text/javascript"> |
86 | isValidationGroup = true; |
分析下代碼為2個tab頁面都加上validationGroup樣式，引發(fā)驗(yàn)證的按鈕加上causesValidation樣式，同時還需要標(biāo)記一個isValidationGroup = true; 表示頁面需要進(jìn)行分組驗(yàn)證，傳遞回母版頁。
注意：這邊的邏輯和手寫JS驗(yàn)證規(guī)則是一個邏輯，在母版頁建立一個isValidationGroup屬性默認(rèn)為false，只有當(dāng)頁面需要進(jìn)行分組驗(yàn)證則設(shè)為true。
接下來看下母版頁的的jQuery(document).ready()中的帶代碼：
01 | if (isValidationGroup) { |
02 | if (opts != undefined || opts != null) { |
03 | jQuery("#<%=form1.ClientId %>").validate(jQuery.extend(opts, { onsubmit: false })); |
05 | jQuery("#<%=form1.ClientId %>").validate({ |
09 | InitValidationGroup(); |
11 | if (opts != undefined || opts != null) { |
12 | jQuery("#<%=form1.ClientId %>").validate(opts); |
14 | jQuery("#<%=form1.ClientId %>").validate(); |
判斷isValidationGroup是否需要進(jìn)行分組驗(yàn)證，同時如果isValidationGroup為true，需要加入onsubmit：false，否則分組驗(yàn)證將無法有效。
到此，jQuery.Validate進(jìn)行客戶端驗(yàn)證（高級篇-上）到此就講完了，本文主要介紹了如何自定義擴(kuò)展驗(yàn)證規(guī)則和分組驗(yàn)證，歡迎大家指點(diǎn)。
PS：在jQuery.Validate進(jìn)行客戶端驗(yàn)證（高級篇-下）將為主要介紹如何使用jQuery.Validate進(jìn)行ajax驗(yàn)證，AJAX驗(yàn)證的封裝及簡單擴(kuò)展，敬請期待！
