[jQuery]使用jQuery.Validate進行客戶端驗證(中級篇-下)——不使用微軟驗證控件的理由
在上一篇文章使用jQuery.Validate進行客戶端驗證(中級篇-上)中我介紹了jQuery.Validate的3種驗證方式,今天這篇中級-下則是在上一篇的基礎上繼續(xù)介紹jQuery.Validate的一些常用的驗證使用方法。
今天主要以使用jQuery.Validate后會遇到的問題為介紹內容,主要介紹以下幾點:
1、在使用上一篇中第2種方式,以JSON的格式編寫驗證規(guī)則,影響了正常的class使用,如何處理?
2、在ASP.NET下,所有的按鈕都會提交form表單,所以都會引發(fā)驗證,如何處理?
3、我希望驗證的提示信息可以在統(tǒng)一的地方顯示,如何處理?
4、我在開發(fā)的過程中,我不確定所編寫的規(guī)則是否正確,如何進行調試?
5、我使用的是微軟AJAX控件,想監(jiān)控dropdownlist是否選擇,為何不起作用?
6、radiobox,checkbox,listbox如何進行高級應用?如何指定選擇數量?
來看下第1點:在使用上一篇中第2種方式,以JSON的格式編寫驗證規(guī)則,影響了正常的class使用,如何處理?(具體見Middle-4.aspx)
首先看下使用第2種方式是如何編寫驗證規(guī)則的:
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不輸入密碼怎么行呢?',minlength:'密碼太短啦至少6位'}}"></asp:TextBox>
可以看到這樣寫驗證規(guī)則雖然簡單,但是如果我要為這個控件應用其他樣式怎么辦?所以現在就是處理這個問題的時候了,在頁面的頭部加上一句代碼:
jQuery.metadata.setType("attr", "validate");
由于這種驗證規(guī)則方式需要依賴jQuery.metadata才可以正常運作,所以我們需要在jQuery.metadata上做文章,分析下jQuery.metadata的代碼,可以看到,默認情況下它是檢測控件的class屬性:
defaults : { type: 'class', name: 'metadata', cre: /({.*})/, single: 'metadata' }
那我們可不可以更改這個屬性呢?肯定是可以的,就是在頁面上加上那句代碼,更改其檢測的屬性。
接著我們還需要修改下頁面中的代碼,將原來所有的"CssClass”改為我們更改的檢測屬性"validate”、這樣就很好的更改了驗證規(guī)則所存放的屬性了。
第2點:在ASP.NET下,所有的按鈕都會提交form表單,所以都會引發(fā)驗證,如何處理?(具體見Middle-4.aspx中btnNoValidate按鈕)在實際的開發(fā)當中,一個頁面上總會有N個按鈕,由于ASP.NET的機制特性,所有的控件都會回發(fā)頁面,也就提交了表單,但是此時整個表單都被jQuery.Validate所監(jiān)控,所以只要頁面中有某個地方不符合驗證規(guī)則,任何回發(fā)頁面的操作都會被攔截住,但是實際上我們需要引發(fā)驗證的
按鈕只有1或者2個,而其他按鈕不需要,這時我們就要想辦法了。
其實很簡單,就是為不需要引發(fā)驗證的控件加個樣式"cancel"即可,代碼如下:
<asp:Button ID="btnNoValidate" runat="server" Text="點我不會引發(fā)驗證哦" CssClass="cancel" />
怎么樣很簡單吧?
第3點:我希望驗證的提示信息可以在統(tǒng)一的地方顯示,如何處理?(具體見Middle-5.aspx)
在開發(fā)的過程當中,會有一些特殊的需求,就比如頁面上使用了tab頁面,而提交按鈕就一個,這時就需要將驗證提示信息統(tǒng)一放在一個位置,好方便查看,如圖:
要實現這個效果只需在JS編寫驗證規(guī)則時添加:
errorPlacement: function(error, element) { error.html(error.html()+"<br/>"); error.appendTo("#errorContainer"); }
error是一個label對象里面包含了錯誤消息,element則是驗證未通過的對象元素,通過errorPlacement可以方便的將驗證提示信息統(tǒng)一放入一個位置。
第4點:我在開發(fā)的過程中,我不確定所編寫的規(guī)則是否正確,如何進行調試?(具體見Middle-5.aspx)這個就比較簡單了,jQuery.Validate默認已經為我們考慮過了,只需在JS編寫規(guī)則時添加一個屬性:
debug:true
這樣就表示現在在調試,這時不會提交表單。
第5點:我使用的是微軟AJAX控件,想監(jiān)控dropdownlist是否選擇,為何不起作用?(具體見Middle-5.aspx中的性別)在使用微軟AJAX控件中的dropdownlist級聯時,比如省市區(qū)聯動,如果省沒有選擇,則市和區(qū)都是灰的,是disabled狀態(tà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>
我這邊是強制把這個DropDownList禁用了,這時如果為這個控件加上“required”將不會有任何反應,因為在jQuery.Validate代碼中默認是不驗證的,具體代碼見jQuery.Validate.js414行:
not(":submit, :reset, :image, [disabled]")
所以為了方便我們使用,我們修改下代碼,將[disabled]"去除,改為:
not(":submit, :reset, :image")
這樣再刷新下頁面,驗證就起作用了。
第6點:radiobox,checkbox,listbox如何進行高級應用?如何指定選擇數量?(具體請見radio-checkbox-select-demo.html)
這點我直接引用了官方關于radiobox,checkbox,listbox應用的例子,因為官方的例子已經寫的非常好了。
以上就是使用jQuery.Validate進行客戶端驗證中級篇-下,本文就jQuery.Validate在使用上遇到的問題進行了介紹(都是我在實際項目中碰到的,進行一個總結,難免有遺漏,如果有過jQuery.Validate開發(fā)經驗的朋友歡迎指點),具體可以下載源代碼查看。
PS:中級篇總算寫完了,下面就是高級篇的應用了,高級篇主要會講:如何擴展驗證方式,分組驗證,AJAX驗證,敬請期待!
轉載:http://www.cnblogs.com/kyo-yo/archive/2010/07/01/Use-jQuery-Validate-To-Being-Client-Validate-Middle-2.html
本文鏈接:http://www.95time.cn/tech/web/2010/7790.asp
出處:博客園
責任編輯:bluehearts
上一頁 使用jQuery.Validate進行客戶端驗證(中篇) [2] 下一頁
◎進入論壇網頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|