在上一篇使用jQuery.Validate進(jìn)行客戶(hù)端驗證（初級篇）中我介紹了為什么選用jQuery.Validate作為客戶(hù)端的理由，同時(shí)也介紹了jQuery.Validate的基本用法以及中文驗證消息的修改方法，今天的中級篇我將介紹下jQuery.Validate的一些常見(jiàn)的驗證的使用方法。
jQuery.Validate為我們提供了3種驗證編寫(xiě)方式，各有優(yōu)缺點(diǎn)：
1、在input對象中書(shū)寫(xiě)class樣式指定驗證規則或屬性驗證規則：
如<input type=”text” class=”required”/>
最簡(jiǎn)單、最便捷，提示消息使用jQuery.Validate的內置的消息（自定義擴展驗證規則也屬于此項），但是由于是以樣式名的方式進(jìn)行驗證，導致了日后修改必須找到相應的input對象，同時(shí)無(wú)法使用高級驗證規則，具體說(shuō)明請向下看
2、同第1條，這種驗證規則方式也是在input對象中書(shū)寫(xiě)class樣式，只不過(guò)書(shū)寫(xiě)的方式改為了JSON格式，但是這種方式提供了自定義驗證消息的支持：
如<input type=”text” class="{required:true,minlength:5,,messages:{required:'請輸入內容'}”/>
簡(jiǎn)單、方便，但個(gè)人認為有點(diǎn)臃腫，還是和第1條一樣和相對應的input對象糾纏在一起，并且還增加消息自定義，使得input對象變的更大了，干擾了頁(yè)面代碼的閱讀，但可以使用高級驗證規則（實(shí)際就是將第3種JS以JSON的格式放到具體的class中
3、這種方式使用純JS的方式：
如：
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}})
})
很好的解決了HTML和驗證規則的分離，就是書(shū)寫(xiě)較為麻煩，需要單獨寫(xiě)JS腳本，但好處是可以統一驗證規范，將每個(gè)頁(yè)面的驗證規則都寫(xiě)在頭部的腳本中，方便日后維護。
注意：以上3種驗證方式的消息如果未指定都會(huì )默認調用內置的消息
在了解了jQuery.Validate為我們提供幾種驗證方式后，我們來(lái)具體分析下每個(gè)驗證方式：
第一種，在input對象中書(shū)寫(xiě)class樣式指定驗證規則或屬性驗證規則，可以將該input需要的規則一次性寫(xiě)在里面（具體見(jiàn)頁(yè)面Middle-1.aspx）。
如:
<asp:TextBox ID="txtAge" runat="server" class="required number" max="99" min="1"></asp:TextBox>
這段代碼的意思是必須輸入年齡字段，年齡必須是數字，同時(shí)必須在0-99范圍內，使用起來(lái)很方便寫(xiě)幾個(gè)屬性就可以搞定，可以根據需求自由的組合驗證規則。
但是就如上面說(shuō)的許多高級的驗證規則無(wú)法使用:
range（范圍驗證，這個(gè)就可以替代max,min），
rangeLength（長(cháng)度范圍驗證，可以替代maxLength,minLength），
equalTo（比較驗證，這個(gè)其實(shí)可以用，但是如果使用使用的是ASP.NET控件就不行，純HTML控件可以。
看下代碼，我想比較2次輸入的密碼是否一樣時(shí)理論上可以這么寫(xiě)：
<asp:TextBox ID="txtRePwd" runat="server" TextMode="Password" CssClass="required" minlength="6" equalTo='#<%=txtPwd.ClientID %>'></asp:TextBox>
但是由于A(yíng)SP.NET控件的機制問(wèn)題，會(huì )把#<%=txtPwd.ClientID %>進(jìn)行轉譯成#<%=txtPwd.ClientID %>這樣就導致了要比較的ID無(wú)法正確獲取，導致驗證不成功。
但如果這么寫(xiě)就不會(huì )出現問(wèn)題：
<input type=”password” class=”required” minlenght=”6” equalTo=”txtPwd”/>
）
第二種，同樣書(shū)寫(xiě)class驗證規則，只不過(guò)以JSON格式書(shū)寫(xiě)，可自定義驗證消息，高級驗證功能，JS驗證規則的簡(jiǎn)化版（具體見(jiàn)頁(yè)面Middle-2.aspx）：
這種方式由于要以JSON的格式來(lái)編寫(xiě)規則，所以需要引用個(gè)單獨的JS文件：jquery.metadata.js
具體書(shū)寫(xiě)代碼格式如下：
<asp:TextBox ID="txtUid" runat="server" CssClass="{required:true,messages:{required:'不輸入用戶(hù)名你怎么登陸?'}}"></asp:TextBox>
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不輸入密碼怎么行呢?',minlength:'密碼太短啦至少6位'}}"></asp:TextBox>
具體意思分別是：必須輸入用戶(hù)名和必須輸入密碼同時(shí)長(cháng)度至少6位。
注意：這邊我重新定義了驗證信息，這樣就不用使用原先在jQuery.Validate中的內置的通用消息，可以指定更加人性化的消息，看下截圖（可以對比下內置提示信息和自定義提示信息）：
使用了這種方式后，我們就可以使用第一種驗證方式中無(wú)法使用的一些驗證規則了，如range：
<asp:TextBox ID="txtAge" runat="server" class="{required:true,number:true,range:[1,99],messages:{range:'您的年齡有問(wèn)題把,得在1-99歲之間哦'}}"></asp:TextBox>
同樣我這邊也修改了具體具體的消息，而rangelength的用法也與這個(gè)類(lèi)似我就不演示了。
同樣很遺憾的，由于A(yíng)SP.NET控件特性問(wèn)題equalTo在這也不能使用，HTML還是有效的。
第三種，使用JS進(jìn)行規則驗證，可以使用所有驗證規則，并且可以試HTML代碼和驗證規則很好的分離，方便日后維護（具體代碼見(jiàn)Middle-3.aspx）
這種方式需要手寫(xiě)JS來(lái)編寫(xiě)驗證的規則，具體的格式如下：
01function InitRules() {
02opts = {
03rules:
04{
05<%=txtUid.UniqueID %>:
06{
07required: true
08},
09<%=txtPwd.UniqueID %>:
10{
11required: true,
12minlength: 6
13},
14<%=txtRePwd.UniqueID %>:
15{
16required: true,
17minlength: 6,
18equalTo:"#<%=txtPwd.ClientID %>"
19},
20<%=txtName.UniqueID %>:
21{
22required: true
23},
24<%=txtAge.UniqueID %>:
25{
26required: true,
27number: true,
28range: [1,99]
29},
30<%=txtEmail.UniqueID %>:
31{
32email: true
33}
34},
35messages:
36{
37<%=txtPwd.UniqueID %>:
38{
39required:"不輸入用戶(hù)名你怎么登陸?"
40},
41<%=txtPwd.UniqueID %>:
42{
43required:"你不輸入密碼怎么行呢?",
44minlength:"密碼太短啦至少6位"
45},
46<%=txtAge.UniqueID %>:
47{
48range:"您的年齡有問(wèn)題把,得在1-99歲之間哦"
49}
50}
51}
52}
這種方式雖然可以使用所有的高級功能，驗證規則也分離出來(lái)了，但是就是書(shū)寫(xiě)起來(lái)不簡(jiǎn)便，所以我的個(gè)人建議是如果不是要求很高的情況下，可以將如required，number，email等常規的簡(jiǎn)單的驗證規則使用第1種驗證方式，方便、快捷，只有當第1種無(wú)法實(shí)行的時(shí)候才使用這種方式，如equalTo（比較驗證），remote（AJAX驗證）等，這樣相互結合效率是最高的。
到這邊可能會(huì )有人奇怪了，因為在上面介紹這種JS驗證方式的的時(shí)候有個(gè)小例子，需要把規則放入jQuery.Validate的方法中，否則制定的驗證規則是無(wú)效的。
這里我就要說(shuō)明下了，因為，這個(gè)例子中我使用的模擬一個(gè)項目的形式編寫(xiě)的，頁(yè)面全部套用母版頁(yè)，所以為了滿(mǎn)足jQuery.Validate攔截form表單的方式，所以我在母版頁(yè)中的<header>定義了一個(gè)變量用來(lái)存放每個(gè)頁(yè)面中定義的驗證規則：var opts = null;，這樣根據HTML從上到下的解析方式首先opts被定義，然后在每個(gè)子頁(yè)面被賦值，最后再返回母版頁(yè)中的jQuery.Validate初始攔截form方法：
jQuery(document).ready(function() {
if (opts != undefined || opts != null) {
jQuery("#<%=form1.ClientID %>").validate(opts);
} else {
jQuery("#<%=form1.ClientID %>").validate();
}
});如果在子頁(yè)面里制定了規則，則按規則驗證，沒(méi)有規則則直接驗證（這邊的opts中包含的規則和具體的class規則不會(huì )有沖突，你可以將一部分規則寫(xiě)在opts中（remote，equalTo），另外的規則寫(xiě)在class中（required，number等）
聯(lián)系客服
