使用jQuery.Validate進行客戶端驗證（初級篇）不使用微軟驗證控件的理由

更新時間：2010年06月28日 18:37:52 作者：

以前在做項目的時候就有個很大心病，就是微軟的驗證控件，雖然微軟的驗證控件可以幫我們完成大部分的驗證，驗證也很可靠上手也很容易，但是我就是覺得不爽.

主要理由有以下幾點：

1、拖控件太麻煩，這個是微軟控件的常用方式，你要使用一個控件你得從工具欄中拖到頁面里（當然你也可以不拖手寫）。

2、必須指定驗證對象，驗證控件與其他textbox，dropdownlist控件不同的是它是驗證其他控件的輸入是否有效的，所以必須指定所驗證的對象。

3、影響整個頁面美觀，像一些管理系統(tǒng)總是需要進行大量的用戶輸入驗證，所以就可能導致一個頁面上有幾十個驗證控件嚴重影響了原來頁面里的東西，看起來十分不舒服。

4、ajax驗證不方便，現在的系統(tǒng)越來越注重客戶的用戶體驗，所以ajax驗證必不可少，但是微軟的驗證控件并沒有提供ajax驗證（當然你也可以通過微軟的UpdatePanel來進行），需要自己去擴展。

說了上面那么多，我只是表明我的意思，微軟的驗證控件不太好用，所以這時候我就在想有沒一些好用點的驗證控件呢？

有2個方法：1、自己編寫一個（考慮到自己水平還沒那么高，想想還是算了）

2、去找一個已經完善的驗證控件（這個比較靠譜，畢竟我做不到，別人還是能做到的）

所以按照我的要求：1、不用拖控件

2、不影響頁面代碼

3、簡單的AJAX驗證

去網絡搜尋找到了2種類型的：1、自己編寫的ASP.NET驗證控件，雖然封裝了比較多的功能但是還是滿足不了我需求

2、javascript類型的驗證函數庫，這個比較靠譜，畢竟js可以和頁面代碼分離（不影響頁面代碼），只需要調用函數庫里的驗證代碼就可以進行指定對象的驗證了（不用拖控件），同時ajax本質還是要靠javascript來調用（AJAX驗證）

所以我根據上面第2條線索就搜索使用javascript編寫的驗證庫——jQuery.Validate，這個驗證庫是屬于jQuery的插件，是由bassistance.de編寫的，bassistance.de還提供許多jQuery其他插件，如Accordion，Autocomplete（我的使用jQuery.AutoComplete完成仿淘寶商品搜索功能(改進了鍵盤上下選擇體驗)就是基于這個autocomplete編寫的），Tooltip等等（具體的可以上他們的網站查看）。

決定使用jQuery.Validate首先下載其JS插件:

進入http://bassistance.de/jquery-plugins/jquery-plugin-validation/選擇DownLoad下載,里面包含了許多示例可供我們學習

接下來我們就開始正式使用了，建立一個基本的網站，建立好一個母版頁（這邊使用母版頁是因為具體的一些項目中都會有一個母版頁來存放一些公用的東西，這邊為了模擬一個真實的環(huán)境，所以建立母版頁，如果覺得不需要可以不建立直接建立頁面即可），然后把jQuery和jQuery.Validate都引入母版頁：

小技巧：與一般的引用不同，我這邊把腳本的路徑采用Page.ResolveClientUrl進行獲取，由于在一些項目開發(fā)中，不同模塊的代碼會分不同的目錄來操作，而母版頁一半是在網站的根目錄所以為了保證所有頁面的基本都可以引用到，所以需要將路徑進行重新獲取（不過這樣做也有不好之處就是這樣無法在后臺的代碼中動態(tài)為<header>添加東西，編譯器會報錯，解決辦法是在<header>中放入一個literal控件，在后臺代碼里重新拼字符串賦給literal）。

在引用完基本所需的腳本后就在母版頁中添加腳本來進行驗證。

jQuery.Validate是監(jiān)控form，在任何提交表單的操作前jQuery.Validate都會檢測表單里的輸入項是否滿足規(guī)則，滿足才允許提交。所以需

要在jQuery(document).ready（）時為form進行驗證注冊

具體代碼如下:

復制代碼代碼如下:

 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
</asp:ContentPlaceHolder> 
</div> 
</form> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery("#<%=form1.ClientID %>").validate(); 
}); 
</script> 
</body> 

到這邊肯定會有人疑問了,為什么要把jQuery.Validate的代碼寫在頁面的<body>中，這點牽扯到驗證規(guī)則制定和分組驗證的方法將會在中級篇和高級篇中講解。
注冊完驗證監(jiān)控后我們就可以開始編寫具體的驗證代碼了，我們通過母版頁建立一個子頁面，在頁面里放幾個基本的輸入框代碼如下：

復制代碼代碼如下:

 
<%@ Page Title="員工信息管理-初級驗證" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" 
CodeFile="Base.aspx.cs" Inherits="_Base" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
<table cellpadding="1" cellspacing="1" border="1" width="50%" align="center"> 
<tr> 
<td> 
用戶名 
</td> 
<td> 
<asp:TextBox ID="txtUid" runat="server" CssClass="required"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
姓名 
</td> 
<td> 
<asp:TextBox ID="txtName" runat="server" CssClass="required"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
年齡 
</td> 
<td> 
<asp:TextBox ID="TextBox1" runat="server" CssClass="number"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
郵箱 
</td> 
<td> 
<asp:TextBox ID="TextBox2" runat="server" CssClass="email"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td colspan="2" align="center"> 
<asp:Button ID="Button1" runat="server" Text="提交" /> 
</td> 
</tr> 
</table> 
</asp:Content> 

上面的代碼中我已經完成了對用戶名,姓名,年齡,郵箱的驗證了，不知道你發(fā)現了沒，就是在每個textbox中的class樣式，其中required表示必填，number表示必須是數字，email表示必須是電子郵件格式，如果寫成required email表示這個字段必須填寫同時必須是email格式。
怎么樣？是不是相當的簡單，省去了拖控件，指定驗證控件等啰嗦的代碼，僅僅一個【樣式名】就搞定了，當然jQuery.Validate還提供許多驗證方法，如日期，范圍，最大值，最小值，整數，值比較等多種驗證方式，同時你還可以自定義驗證方式（當然這種自定義驗證方式在初級篇不會將到，請期待中級高級篇）。
好了，我們點下提交按鈕看下運行的效果：

不錯，果然驗證成功了，但是有個問題，怎么提示信息全是英文的？

我們查看下jQuery.Validate源代碼，在236行果然有提示消息的定義方式，我們就可以進行修改這邊的消息改成中文的方式，或者自定義了一個中文的消息jQuery.Validate.message_cn.js，然后使用jQuery.extend來覆蓋jQuery.Validate自身的消息，代碼如下：

復制代碼代碼如下:

 
//定義中文消息 
var cnmsg = { 
required: "必選字段", 
remote: "請修正該字段", 
email: "請輸入正確格式的電子郵件", 
url: "請輸入合法的網址", 
date: "請輸入合法的日期", 
dateISO: "請輸入合法的日期 (ISO).", 
number: "請輸入合法的數字", 
digits: "只能輸入整數", 
creditcard: "請輸入合法的信用卡號", 
equalTo: "請再次輸入相同的值", 
accept: "請輸入擁有合法后綴名的字符串", 
maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字符串"), 
minlength: jQuery.format("請輸入一個長度最少是 {0} 的字符串"), 
rangelength: jQuery.format("請輸入一個長度介于 {0} 和 {1} 之間的字符串"), 
range: jQuery.format("請輸入一個介于 {0} 和 {1} 之間的值"), 
max: jQuery.format("請輸入一個最大為 {0} 的值"), 
min: jQuery.format("請輸入一個最小為 {0} 的值") 
}; 
jQuery.extend(jQuery.validator.messages, cnmsg); 

這樣只需在母版頁里引用下jQuery.Validate.message_cn.js就可以把原有的英文提示給替換掉了，2種方式都是可取的，如果你想把jQuery.Validate改造成適合自己的驗證控件就是用第1種方式直接改源代碼，如果你只是想用些基本功能不想動原來的源代碼就是用第2種方法。

然后我們重新刷新下頁面，果然全變成中文了?？聪滦Ч?

注意：這邊錯誤提示消息的樣式是可以自己定義的，我就修改了原有的樣式，加上了個錯誤圖標，更加好看點，樣式定義如下：

復制代碼代碼如下:

 
<style type="text/css"> 
/************jQuery.Validate插件樣式開始********************/ 
label.error 
{ 
background: url(images/error.png) no-repeat 0px 0px; 
color: Red; 
padding-left: 20px; 
} 
input.error 
{ 
border: dashed 1px red; 
} 
/************jQuery.Validate插件樣式結束********************/ 
</style> 

到此，使用jQuery.Validate進行客戶端驗證的初級篇就寫完了，具體的代碼大家可以下載下面的源代碼查看，敬請期待中級篇和高級篇。
PS：1、代碼中jquery.validate.js為官方版本，而jquery.validate1.js為我修改的版本，關于修改的內容在中級篇和高級篇我會講到。
2、jQuery.Validate僅能做客戶端驗證，并不能代替服務器端驗證，為了系統(tǒng)的安全所以服務器端還是要進行驗證的。
源代碼下載：點我下載

作者：kyo-yo

您可能感興趣的文章: