一句話完成一個表單檢測,你信不信?讓我們來看看NValidator的威力吧,簡潔而又簡單的面向?qū)ο髾z測的實現(xiàn)。
這次,我們以一個簡單的注冊頁面來做例子,html如下:
我們要實現(xiàn)的檢測條件是:
賬號:必填,長度2位到20位,以字母開頭,字母,數(shù)字和_組成。
密碼:必填,長度6位到108位,以字母,數(shù)字和@,$,&,-,#,_組成,而且兩次輸入必須一致。
郵箱:不是必填,但是如果輸入,必須符合郵箱格式。
驗證碼:必填,4位全數(shù)字。
所有輸入必須輸入完成后即使檢測提示,當然,按提交的時候也必須全部檢測一遍,通過才能提交。
按照常規(guī)的做法,我們往往是在界面上修改html代碼,并在每個textbox加上onblur函數(shù),然后再提及按鈕再加個onclick函數(shù)。然后再相應的函數(shù)寫那一堆一堆的檢查條件。對吧?
這樣的寫法,不是說不好。而是在系統(tǒng)設計的角度看,html是UI表現(xiàn),檢測是業(yè)務邏輯(就檢測來說是業(yè)務),按常規(guī)的寫法,表現(xiàn)和業(yè)務就耦合在一起了。那么有辦法把他們分離開來嗎?當然有,這就是NValidator出場的原因。
按照面向?qū)ο筮壿?,檢測是一個業(yè)務過程,這個過程必須有一個對象來執(zhí)行,如果我們要檢測一個輸入是否為空,我們應該只需要給這個對象說:“帥哥,幫我檢測一下xxx輸入是否為空。”,然后,帥哥NValidator就會返回一個結(jié)果告訴我們這個輸入對象是否為空。就是說,我們大概只要寫如下代碼:
就可以檢測到用戶是否有輸入賬號。對吧?這樣才夠?qū)ο蟀??而NValidator就能幫我們實現(xiàn)這樣的需求。按照上面訂的檢測條件,我們用NValidator實現(xiàn):
首先,我們得現(xiàn)在項目中引用NValidator的DLL
只需要在頁面后臺的Page_PreRender函數(shù)里面寫下一句代碼:
:-( ,雖然代碼有點長,但也算一句是不是?我沒有說慌騙大家哦。按常規(guī)寫法,應該是這樣的:
可能你會懷疑。這樣就可以了?不需要寫其他JS代碼?不需要改html?我可以負責任的告訴你,真的不需要?。?!而且,通過設置Finish函數(shù)的參數(shù),還可以選擇提示方式采用直接附加提示信息到輸入框后邊還是彈出提示。
檢測效果大概如下:
就這么簡單,夠簡單了吧?怎么實現(xiàn)的?放心,NValidator是簡單的一個組件,而且是全開源的組件。不怕你不懂,就怕你不用~呵呵
說原理之前,請先看看我之前的一篇隨筆:從丑陋到優(yōu)雅,讓代碼越變越美(客戶端檢測方法思考) 這篇文章簡略的介紹了一下我在客戶端檢測方面的探索思路和過程。而我們的NValidator,就是在這個基礎上發(fā)展過來的。
現(xiàn)在,如果你理解了我之前的文章,NValidator就很簡單,不過是一個Json字符串的生成器。按照相應的選擇生成相應的Json字符串,然后客戶端就調(diào)用檢測。簡單得我都不好意思講~~如果你不明白,歡迎你發(fā)Email給我(kenblove#gmail.com)討論:-).
源代碼我放到google上了,請大家移玉步下載:http://code.google.com/p/nvalidator/
代碼比較簡陋,正在不斷完善和發(fā)布新版本,請大家多多指教!
暫時實現(xiàn)的檢測:
1、 數(shù)字 IsNumber()
2、 整數(shù) IsInt()
3、 正整數(shù) IsSINT()
4、 負整數(shù) IsNINT()
5、 非負整數(shù) IsNotNINT()
6、 非正整數(shù) IsNotSINT()
7、 浮點數(shù) IsFloat()
8、 正浮點數(shù) IsSFloat()
9、 負浮點數(shù) IsNFloat()
10、 非負浮點數(shù) IsNotNFloat()
11、 非正浮點數(shù) IsNotSFloat()
12、 英文字母 IsEnglish
13、 大寫英文字母 IsUpper()
14、 小寫英文字母 IsLower()
15、 中文字符 IsChinese()
16、 雙字節(jié)文字 IsDoubleByte()
17、 常規(guī)用戶名 IsName()
18、 常規(guī)密碼 IsPwd()
19、 電子郵件 IsEmail()
20、 URL地址 IsUrl()
21、 IP地址 IsIP()
22、 完整日期 IsDateTime()
23、 日期 IsDate()
24、 時間 IsTime()
25、 國內(nèi)固定電話 IsTel()
26、 國內(nèi)移動電話 IsMobile()
27、 郵政編碼 IsPostCode()
28、 QQ號碼 IsQQ()
29、 國內(nèi)身份證 IsIDCard()
30、 為空 IsEmpty()
31、 長度范圍 IsInLengthRange(min,max)
32、 兩個是否一致 IsSameWithPrev(prevId)
33、 匹配正則 IsMatchRegular(regular)
所有檢查都重載過可以自定義提示信息。驗證庫還很簡陋,正在不斷完善補充。目標是一個DLL就完成所有檢測,然后再增加JS動態(tài)表單的檢測。
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答!! 點擊進入論壇