|
[jQuery]使用jQuery.Validate進(jìn)行客戶端驗(yàn)證（初級(jí)篇）——不使用微軟驗(yàn)證控件的理由
以前在做項(xiàng)目的時(shí)候就有個(gè)很大心病，就是微軟的驗(yàn)證控件，雖然微軟的驗(yàn)證控件可以幫我們完成大部分的驗(yàn)證，驗(yàn)證也很可靠上手也很容易，但是我就是覺(jué)得不爽，主要理由有以下幾點(diǎn)：
1、拖控件太麻煩，這個(gè)是微軟控件的常用方式，你要使用一個(gè)控件你得從工具欄中拖到頁(yè)面里（當(dāng)然你也可以不拖手寫(xiě)）。
2、必須指定驗(yàn)證對(duì)象，驗(yàn)證控件與其他textbox，dropdownlist控件不同的是它是驗(yàn)證其他控件的輸入是否有效的，所以必須指定所驗(yàn)證的對(duì)象。
3、影響整個(gè)頁(yè)面美觀，像一些管理系統(tǒng)總是需要進(jìn)行大量的用戶輸入驗(yàn)證，所以就可能導(dǎo)致一個(gè)頁(yè)面上有幾十個(gè)驗(yàn)證控件嚴(yán)重影響了原來(lái)頁(yè)面里的東西，看起來(lái)十分不舒服。
4、ajax驗(yàn)證不方便，現(xiàn)在的系統(tǒng)越來(lái)越注重客戶的用戶體驗(yàn)，所以ajax驗(yàn)證必不可少，但是微軟的驗(yàn)證控件并沒(méi)有提供ajax驗(yàn)證（當(dāng)然你也可以通過(guò)微軟的UpdatePanel來(lái)進(jìn)行），需要自己去擴(kuò)展。
說(shuō)了上面那么多，我只是表明我的意思，微軟的驗(yàn)證控件不太好用，所以這時(shí)候我就在想有沒(méi)一些好用點(diǎn)的驗(yàn)證控件呢？
有2個(gè)方法：
1、自己編寫(xiě)一個(gè)（考慮到自己水平還沒(méi)那么高，想想還是算了）
2、去找一個(gè)已經(jīng)完善的驗(yàn)證控件（這個(gè)比較靠譜，畢竟我做不到，別人還是能做到的）
所以按照我的要求：
1、不用拖控件
2、不影響頁(yè)面代碼
3、簡(jiǎn)單的AJAX驗(yàn)證
去網(wǎng)絡(luò)搜尋找到了2種類型的：
1、自己編寫(xiě)的ASP.NET驗(yàn)證控件，雖然封裝了比較多的功能但是還是滿足不了我需求
2、javascript類型的驗(yàn)證函數(shù)庫(kù)，這個(gè)比較靠譜，畢竟js可以和頁(yè)面代碼分離（不影響頁(yè)面代碼），只需要調(diào)用函數(shù)庫(kù)里的驗(yàn)證代碼就可以進(jìn)行指定對(duì)象的驗(yàn)證了（不用拖控件），同時(shí)ajax本質(zhì)還是要靠javascript來(lái)調(diào)用（AJAX驗(yàn)證）
所以我根據(jù)上面第2條線索就搜索使用javascript編寫(xiě)的驗(yàn)證庫(kù)——jQuery.Validate，這個(gè)驗(yàn)證庫(kù)是屬于jQuery的插件，是由bassistance.de編寫(xiě)的，bassistance.de還提供許多jQuery其他插件，如Accordion，Autocomplete（我的使用jQuery.AutoComplete完成仿淘寶商品搜索功能(改進(jìn)了鍵盤(pán)上下選擇體驗(yàn))就是基于這個(gè)autocomplete編寫(xiě)的），Tooltip等等（具體的可以上他們的網(wǎng)站查看）。
決定使用jQuery.Validate首先下載其JS插件:
進(jìn)入http://bassistance.de/jquery-plugins/jquery-plugin-validation/選擇DownLoad下載,里面包含了許多示例可供我們學(xué)習(xí)
接下來(lái)我們就開(kāi)始正式使用了，建立一個(gè)基本的網(wǎng)站，建立好一個(gè)母版頁(yè)（這邊使用母版頁(yè)是因?yàn)榫唧w的一些項(xiàng)目中都會(huì)有一個(gè)母版頁(yè)來(lái)存放一些公用的東西，這邊為了模擬一個(gè)真實(shí)的環(huán)境，所以建立母版頁(yè)，如果覺(jué)得不需要可以不建立直接建立頁(yè)面即可），然后把jQuery和jQuery.Validate都引入母版頁(yè)：
<script src='<%= Page.ResolveClientUrl("~/scripts/jquery-1.4.1.js") %>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/scripts/jquery.validate1.js") %>' type="text/javascript"></script>
小技巧：與一般的引用不同，我這邊把腳本的路徑采用Page.ResolveClientUrl進(jìn)行獲取，由于在一些項(xiàng)目開(kāi)發(fā)中，不同模塊的代碼會(huì)分不同的目錄來(lái)操作，而母版頁(yè)一半是在網(wǎng)站的根目錄所以為了保證所有頁(yè)面的基本都可以引用到，所以需要將路徑進(jìn)行重新獲取（不過(guò)這樣做也有不好之處就是這樣無(wú)法在后臺(tái)的代碼中動(dòng)態(tài)為<header>添加?xùn)|西，編譯器會(huì)報(bào)錯(cuò)，解決辦法是在<header>中放入一個(gè)literal控件，在后臺(tái)代碼里重新拼字符串賦給literal）。
出處：博客園
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 使用jQuery.Validate進(jìn)行客戶端驗(yàn)證(前篇) [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 使用jQuery.Validate進(jìn)行客戶端驗(yàn)證(前篇) [1]
第 2 頁(yè) 
