以前在做項目的時(shí)候就有個(gè)很大心病，就是微軟的驗證控件，雖然微軟的驗證控件可以幫我們完成大部分的驗證，驗證也很可靠上手也很容易，但是我就是覺(jué)得不爽，主要理由有以下幾點(diǎn)：
1、拖控件太麻煩，這個(gè)是微軟控件的常用方式，你要使用一個(gè)控件你得從工具欄中拖到頁(yè)面里（當然你也可以不拖手寫(xiě)）。
2、必須指定驗證對象，驗證控件與其他textbox，dropdownlist控件不同的是它是驗證其他控件的輸入是否有效的，所以必須指定所驗證的對象。
3、影響整個(gè)頁(yè)面美觀(guān)，像一些管理系統總是需要進(jìn)行大量的用戶(hù)輸入驗證，所以就可能導致一個(gè)頁(yè)面上有幾十個(gè)驗證控件嚴重影響了原來(lái)頁(yè)面里的東西，看起來(lái)十分不舒服。
4、ajax驗證不方便，現在的系統越來(lái)越注重客戶(hù)的用戶(hù)體驗，所以ajax驗證必不可少，但是微軟的驗證控件并沒(méi)有提供ajax驗證（當然你也可以通過(guò)微軟的UpdatePanel來(lái)進(jìn)行），需要自己去擴展。
說(shuō)了上面那么多，我只是表明我的意思，微軟的驗證控件不太好用，所以這時(shí)候我就在想有沒(méi)一些好用點(diǎn)的驗證控件呢？
有2個(gè)方法：1、自己編寫(xiě)一個(gè)（考慮到自己水平還沒(méi)那么高，想想還是算了）
2、去找一個(gè)已經(jīng)完善的驗證控件（這個(gè)比較靠譜，畢竟我做不到，別人還是能做到的）
所以按照我的要求：1、不用拖控件
2、不影響頁(yè)面代碼
3、簡(jiǎn)單的AJAX驗證
去網(wǎng)絡(luò )搜尋找到了2種類(lèi)型的：1、自己編寫(xiě)的ASP.NET驗證控件，雖然封裝了比較多的功能但是還是滿(mǎn)足不了我需求
2、javascript類(lèi)型的驗證函數庫，這個(gè)比較靠譜，畢竟js可以和頁(yè)面代碼分離（不影響頁(yè)面代碼），只需要調用函數庫里的驗證代碼就可以進(jìn)行指定對象的驗證了（不用拖控件），同時(shí)ajax本質(zhì)還是要靠javascript來(lái)調用（AJAX驗證）
所以我根據上面第2條線(xiàn)索就搜索使用javascript編寫(xiě)的驗證庫——jQuery.Validate，這個(gè)驗證庫是屬于jQuery的插件，是由bassistance.de編寫(xiě)的，bassistance.de還提供許多jQuery其他插件，如Accordion，Autocomplete（我的使用jQuery.AutoComplete完成仿淘寶商品搜索功能(改進(jìn)了鍵盤(pán)上下選擇體驗)就是基于這個(gè)autocomplete編寫(xiě)的），Tooltip等等（具體的可以上他們的網(wǎng)站查看）。
決定使用jQuery.Validate首先下載其JS插件:
進(jìn)入http://bassistance.de/jquery-plugins/jquery-plugin-validation/選擇DownLoad下載,里面包含了許多示例可供我們學(xué)習
接下來(lái)我們就開(kāi)始正式使用了，建立一個(gè)基本的網(wǎng)站，建立好一個(gè)母版頁(yè)（這邊使用母版頁(yè)是因為具體的一些項目中都會(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)行獲取，由于在一些項目開(kāi)發(fā)中，不同模塊的代碼會(huì )分不同的目錄來(lái)操作，而母版頁(yè)一半是在網(wǎng)站的根目錄所以為了保證所有頁(yè)面的基本都可以引用到，所以需要將路徑進(jìn)行重新獲?。?strong>不過(guò)這樣做也有不好之處就是這樣無(wú)法在后臺的代碼中動(dòng)態(tài)為<header>添加東西，編譯器會(huì )報錯，解決辦法是在<header>中放入一個(gè)literal控件，在后臺代碼里重新拼字符串賦給literal）。
在引用完基本所需的腳本后就在母版頁(yè)中添加腳本來(lái)進(jìn)行驗證。
jQuery.Validate是監控form，在任何提交表單的操作前jQuery.Validate都會(huì )檢測表單里的輸入項是否滿(mǎn)足規則，滿(mǎn)足才允許提交。所以需
要在jQuery(document).ready（）時(shí)為form進(jìn)行驗證注冊
具體代碼如下:
<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>
到這邊肯定會(huì )有人疑問(wèn)了,為什么要把jQuery.Validate的代碼寫(xiě)在頁(yè)面的<body>中，這點(diǎn)牽扯到驗證規則制定和分組驗證的方法將會(huì )在中級篇和高級篇中講解。
注冊完驗證監控后我們就可以開(kāi)始編寫(xiě)具體的驗證代碼了，我們通過(guò)母版頁(yè)建立一個(gè)子頁(yè)面，在頁(yè)面里放幾個(gè)基本的輸入框代碼如下：
<%@ 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>
用戶(hù)名
</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>
上面的代碼中我已經(jīng)完成了對用戶(hù)名,姓名,年齡,郵箱的驗證了，不知道你發(fā)現了沒(méi)，就是在每個(gè)textbox中的class樣式，其中required表示必填，number表示必須是數字，email表示必須是電子郵件格式，如果寫(xiě)成required email表示這個(gè)字段必須填寫(xiě)同時(shí)必須是email格式。
怎么樣？是不是相當的簡(jiǎn)單，省去了拖控件，指定驗證控件等啰嗦的代碼，僅僅一個(gè)【樣式名】就搞定了，當然jQuery.Validate還提供許多驗證方法，如日期，范圍，最大值，最小值，整數，值比較等多種驗證方式，同時(shí)你還可以自定義驗證方式（當然這種自定義驗證方式在初級篇不會(huì )將到，請期待中級高級篇）。
好了，我們點(diǎn)下提交按鈕看下運行的效果：
不錯，果然驗證成功了，但是有個(gè)問(wèn)題，怎么提示信息全是英文的？
我們查看下jQuery.Validate源代碼，在236行果然有提示消息的定義方式，我們就可以進(jìn)行修改這邊的消息改成中文的方式，或者自定義了一個(gè)中文的消息jQuery.Validate.message_cn.js，然后使用jQuery.extend來(lái)覆蓋jQuery.Validate自身的消息，代碼如下：
//定義中文消息
var cnmsg = {
required: "必選字段",
remote: "請修正該字段",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網(wǎng)址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法后綴名的字符串",
maxlength: jQuery.format("請輸入一個(gè)長(cháng)度最多是 {0} 的字符串"),
minlength: jQuery.format("請輸入一個(gè)長(cháng)度最少是 {0} 的字符串"),
rangelength: jQuery.format("請輸入一個(gè)長(cháng)度介于 {0} 和 {1} 之間的字符串"),
range: jQuery.format("請輸入一個(gè)介于 {0} 和 {1} 之間的值"),
max: jQuery.format("請輸入一個(gè)最大為 {0} 的值"),
min: jQuery.format("請輸入一個(gè)最小為 {0} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);
這樣只需在母版頁(yè)里引用下jQuery.Validate.message_cn.js就可以把原有的英文提示給替換掉了，2種方式都是可取的，如果你想把jQuery.Validate改造成適合自己的驗證控件就是用第1種方式直接改源代碼，如果你只是想用些基本功能不想動(dòng)原來(lái)的源代碼就是用第2種方法。
然后我們重新刷新下頁(yè)面，果然全變成中文了?？聪滦Ч?/p>
注意：這邊錯誤提示消息的樣式是可以自己定義的，我就修改了原有的樣式，加上了個(gè)錯誤圖標，更加好看點(diǎn)，樣式定義如下：
<style type="text/css">
/************jQuery.Validate插件樣式開(kāi)始********************/
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進(jìn)行客戶(hù)端驗證的初級篇就寫(xiě)完了，具體的代碼大家可以下載下面的源代碼查看，敬請期待中級篇和高級篇。
聯(lián)系客服
