一句話完成一個表單檢測，你信不信？讓我們來看看NValidator的威力吧，簡潔而又簡單的面向對象檢測的實現。

這次，我們以一個簡單的注冊頁面來做例子，html如下：

?

Code
<div?id="Register">
<div?id="Register_drog">
????<p>
????????注冊窗口</p>
</div>
<div?id="Register_content">
????<table?id="tb_Register">
????????<tbody>
????????????<tr>
????????????????<td>
????????????????????請在下面輸入你的注冊信息:
????????????????</td>
????????????</tr>
????????????<tr>
????????????????<td>
????????????????????你的帳號:
????????????????????<asp:TextBox?ID="txtUserName"?ToolTip="請輸入你的帳號"?runat="server"></asp:TextBox>
????????????????</td>
????????????</tr>
????????????<tr>
????????????????<td>
????????????????????你的密碼:
????????????????????<asp:TextBox?TextMode="Password"?ID="txtPassword1"?ToolTip="請輸入你的密碼"?runat="server"></asp:TextBox>
????????????????</td>
????????????</tr>
????????????<tr>
????????????????<td>
????????????????????確認密碼:
????????????????????<asp:TextBox?TextMode="Password"?ID="txtPassword2"?ToolTip="請輸入你的密碼"?runat="server"></asp:TextBox>
????????????????</td>
????????????</tr>
????????????<tr>
????????????????<td>
????????????????????電子郵箱:
????????????????????<asp:TextBox?ID="txtEmail"?ToolTip="請輸入你的電子郵箱"?runat="server"></asp:TextBox>
????????????????</td>
????????????</tr>
????????????<tr>
????????????????<td>
????????????????????注冊校驗:
????????????????????<asp:TextBox?ID="txtValidate"?ToolTip="請輸入右邊校驗碼"?runat="server"></asp:TextBox>
????????????????</td>
????????????</tr>
????????????<tr>
????????????????<td>
????????????????????<asp:Button?ID="btnRegister"?ToolTip="點擊注冊"?Text="注?冊"?OnClick="btnRegister_OnClick"
????????????????????????runat="server"?/>
????????????????</td>
????????????</tr>
????????</tbody>
????</table>
</div>
</div>

?

我們要實現的檢測條件是：

賬號：必填，長度2位到20位，以字母開頭,字母,數字和_組成。

密碼：必填，長度6位到108位，以字母,數字和@,$,&,-,#,_組成，而且兩次輸入必須一致。

郵箱：不是必填，但是如果輸入，必須符合郵箱格式。

驗證碼：必填，4位全數字。

所有輸入必須輸入完成后即使檢測提示，當然，按提交的時候也必須全部檢測一遍，通過才能提交。

按照常規的做法，我們往往是在界面上修改html代碼，并在每個textbox加上onblur函數，然后再提及按鈕再加個onclick函數。然后再相應的函數寫那一堆一堆的檢查條件。對吧？

這樣的寫法，不是說不好。而是在系統設計的角度看，html是UI表現，檢測是業務邏輯（就檢測來說是業務），按常規的寫法，表現和業務就耦合在一起了。那么有辦法把他們分離開來嗎？當然有，這就是NValidator出場的原因。

按照面向對象邏輯，檢測是一個業務過程，這個過程必須有一個對象來執行，如果我們要檢測一個輸入是否為空，我們應該只需要給這個對象說：“帥哥，幫我檢測一下xxx輸入是否為空。”，然后，帥哥NValidator就會返回一個結果告訴我們這個輸入對象是否為空。就是說，我們大概只要寫如下代碼：

?

Code
new?NValidator().Check(this.txtUserName,?IsEmpty())

?

就可以檢測到用戶是否有輸入賬號。對吧？這樣才夠對象吧？而NValidator就能幫我們實現這樣的需求。按照上面訂的檢測條件，我們用NValidator實現：

首先，我們得現在項目中引用NValidator的DLL

只需要在頁面后臺的Page_PreRender函數里面寫下一句代碼：

?

Code
new?NValidator().Check(this.txtUserName.ClientID,?new?CheckOption().IsEmpty().IsName().IsInLengthRange(2,?20)).Check(this.txtPassword1.ClientID,?new?CheckOption().IsEmpty().IsPwd().IsInLengthRange(6,?108)).Check(this.txtPassword2.ClientID,?new?CheckOption().IsEmpty().IsPwd().IsInLengthRange(6,?108).IsSameWithPrev(this.txtPassword1.ClientID)).Check(this.txtEmail.ClientID,?new?CheckOption().IsEmail()).Check(this.txtValidate.ClientID,?new?CheckOption().IsEmpty().IsNumber().IsInLengthRange(4,?4)).Finish(Page,?this.btnRegister.ClientID,?0);

?

:-( ,雖然代碼有點長，但也算一句是不是？我沒有說慌騙大家哦。按常規寫法，應該是這樣的：

?

Code
//常規寫法
NValidator?nv?=?new?NValidator();

CheckOption?co?=?new?CheckOption();
co.IsEmpty();
co.IsName();
co.IsInLengthRange(2,?20);
nv.Check(this.txtUserName.ClientID,?co);

co?=?new?CheckOption();
co.IsEmpty();
co.IsPwd();
co.IsInLengthRange(6,?108);
nv.Check(this.txtPassword1.ClientID,?co);

co?=?new?CheckOption();
co.IsEmpty();
co.IsPwd();
co.IsInLengthRange(6,?108);
co.IsSameWithPrev(this.txtPassword1.ClientID);
nv.Check(txtPassword2.ClientID,?co);

co?=?new?CheckOption();
co.IsEmail();
nv.Check(this.txtEmail.ClientID,?co);

co?=?new?CheckOption();
co.IsEmpty();
co.IsNumber();
co.IsInLengthRange(4,?4);
nv.Check(this.txtValidate.ClientID,?co);

nv.Finish(Page,?this.btnRegister.ClientID,?0);

?

可能你會懷疑。這樣就可以了？不需要寫其他JS代碼？不需要改html？我可以負責任的告訴你，真的不需要！！！而且，通過設置Finish函數的參數，還可以選擇提示方式采用直接附加提示信息到輸入框后邊還是彈出提示。

檢測效果大概如下：

?就這么簡單，夠簡單了吧？怎么實現的？放心，NValidator是簡單的一個組件，而且是全開源的組件。不怕你不懂，就怕你不用~呵呵

說原理之前，請先看看我之前的一篇隨筆：從丑陋到優雅，讓代碼越變越美（客戶端檢測方法思考）?這篇文章簡略的介紹了一下我在客戶端檢測方面的探索思路和過程。而我們的NValidator，就是在這個基礎上發展過來的。

現在，如果你理解了我之前的文章，NValidator就很簡單，不過是一個Json字符串的生成器。按照相應的選擇生成相應的Json字符串，然后客戶端就調用檢測。簡單得我都不好意思講~~如果你不明白，歡迎你發Email給我（kenblove#gmail.com）討論:-).

源代碼我放到google上了，請大家移玉步下載：http://code.google.com/p/nvalidator/

代碼比較簡陋，正在不斷完善和發布新版本，請大家多多指教！

暫時實現的檢測：

1、? 數字 IsNumber()

2、? 整數 IsInt()

3、? 正整數 IsSINT()

4、? 負整數 IsNINT()

5、? 非負整數 IsNotNINT()

6、? 非正整數 IsNotSINT()

7、? 浮點數 IsFloat()

8、? 正浮點數 IsSFloat()

9、? 負浮點數 IsNFloat()

10、????????????? 非負浮點數 IsNotNFloat()

11、????????????? 非正浮點數 IsNotSFloat()

?

12、????????????? 英文字母 IsEnglish

13、????????????? 大寫英文字母 IsUpper()

14、????????????? 小寫英文字母 IsLower()

15、????????????? 中文字符 IsChinese()

16、????????????? 雙字節文字 IsDoubleByte()

?

17、????????????? 常規用戶名 IsName()

18、????????????? 常規密碼 IsPwd()

19、????????????? 電子郵件 IsEmail()

20、????????????? URL地址 IsUrl()

21、????????????? IP地址 IsIP()

22、????????????? 完整日期 IsDateTime()

23、????????????? 日期 IsDate()

24、????????????? 時間 IsTime()

25、????????????? 國內固定電話 IsTel()

26、????????????? 國內移動電話 IsMobile()

27、????????????? 郵政編碼 IsPostCode()

28、????????????? QQ號碼 IsQQ()

29、????????????? 國內身份證 IsIDCard()

?

30、????????????? 為空 IsEmpty()

31、????????????? 長度范圍 IsInLengthRange(min,max)

32、????????????? 兩個是否一致 IsSameWithPrev(prevId)

33、????????????? 匹配正則 IsMatchRegular(regular)

?

所有檢查都重載過可以自定義提示信息。驗證庫還很簡陋，正在不斷完善補充。目標是一個DLL就完成所有檢測，然后再增加JS動態表單的檢測。

轉載于:https://www.cnblogs.com/KenBlove/archive/2009/09/17/1568385.html

總結

以上是生活随笔為你收集整理的优雅还不够，简洁才高效！——用NValidator一句话搞定客户端检测的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。