|
[jQuery]使用jQuery.Validate進(jìn)行客戶端驗證（中級篇-上）——不使用微軟驗證控件的理由
第三種，使用JS進(jìn)行規(guī)則驗證，可以使用所有驗證規(guī)則，并且可以試HTML代碼和驗證規(guī)則很好的分離，方便日后維護(hù)（具體代碼見Middle-3.aspx）
這種方式需要手寫JS來編寫驗證的規(guī)則，具體的格式如下：
view sourceprint?01 function InitRules() {
opts = {
rules:
{
<%=txtUid.UniqueID %>:
{
required: true
},
<%=txtPwd.UniqueID %>:
{
required: true,
minlength: 6
},
<%=txtRePwd.UniqueID %>:
{
required: true,
minlength: 6,
equalTo:"#<%=txtPwd.ClientID %>"
},
<%=txtName.UniqueID %>:
{
required: true
},
<%=txtAge.UniqueID %>:
{
required: true,
number: true,
range: [1,99]
},
<%=txtEmail.UniqueID %>:
{
email: true
}
},
messages:
{
<%=txtPwd.UniqueID %>:
{
required:"不輸入用戶名你怎么登陸?"
},
<%=txtPwd.UniqueID %>:
{
required:"你不輸入密碼怎么行呢?",
minlength:"密碼太短啦至少6位"
},
<%=txtAge.UniqueID %>:
{
range:"您的年齡有問題把,得在1-99歲之間哦"
}
}
}
}
這種方式雖然可以使用所有的高級功能，驗證規(guī)則也分離出來了，但是就是書寫起來不簡便，所以我的個人建議是如果不是要求很高的情況下，可以將如required，number，email等常規(guī)的簡單的驗證規(guī)則使用第1種驗證方式，方便、快捷，只有當(dāng)?shù)?種無法實行的時候才使用這種方式，如equalTo（比較驗證），remote（AJAX驗證）等，這樣相互結(jié)合效率是最高的。
到這邊可能會有人奇怪了，因為在上面介紹這種JS驗證方式的的時候有個小例子，需要把規(guī)則放入jQuery.Validate的方法中，否則制定的驗證規(guī)則是無效的。
這里我就要說明下了，因為，這個例子中我使用的模擬一個項目的形式編寫的，頁面全部套用母版頁，所以為了滿足jQuery.Validate攔截form表單的方式，所以我在母版頁中的<header>定義了一個變量用來存放每個頁面中定義的驗證規(guī)則：var opts = null;，這樣根據(jù)HTML從上到下的解析方式首先opts被定義，然后在每個子頁面被賦值，最后再返回母版頁中的jQuery.Validate初始攔截form方法：
jQuery(document).ready(function() {
if (opts != undefined || opts != null) {
jQuery("#<%=form1.ClientID %>").validate(opts);
} else {
jQuery("#<%=form1.ClientID %>").validate();
}
});
如果在子頁面里制定了規(guī)則，則按規(guī)則驗證，沒有規(guī)則則直接驗證（這邊的opts中包含的規(guī)則和具體的class規(guī)則不會有沖突，你可以將一部分規(guī)則寫在opts中（remote，equalTo），另外的規(guī)則寫在class中（required，number等）
以上就是使用jQuery.Validate進(jìn)行客戶端驗證中級篇-上，具體的代碼請下載源代碼進(jìn)行查看。
PS：1、本來想把中篇寫成一篇的，但是寫著寫著發(fā)現(xiàn)東西實在太多，寫在1篇里會太多，所以分成了2篇寫，請見諒！
2、下一篇將對jQuery.Validate的使用過程中會碰到的問題進(jìn)行介紹，如第2種驗證方式更改驗證規(guī)則所處的屬性、指定驗證信息顯示位置等。
轉(zhuǎn)載：http://www.cnblogs.com/kyo-yo/archive/2010/06/29/Use-jQueryValidate-To-Being-Client-Validation.html
出處：博客園
責(zé)任編輯：bluehearts
上一頁 使用jQuery.Validate進(jìn)行客戶端驗證(中篇) [1] 下一頁 使用jQuery.Validate進(jìn)行客戶端驗證(中篇) [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 使用jQuery.Validate進(jìn)行客戶端驗證(中篇) [2]
