asp.net mvc 內建驗證擴充與活用技巧 -twmvc#3
DESCRIPTION
撰寫網頁的時候你是否對於表單驗證很厭煩？ 尤其現在網頁對於使用者經驗（UX）相當的注重，之前我們可以偷懶只寫後端驗證，現在不做前端驗證會被笑... 俗話說的好，程式設計師要懶，本次課程將和你介紹如何利用 ASP.NET MVC 內建的招式簡單的做出品質不錯的前後端驗證，而且彈性超大，你愛怎麼擴充就怎麼擴充，經常性寫到表單的開發人員千萬不要錯過。 http://mvc.twTRANSCRIPT
ASP.NET MVC Validation
快速開發系列
美商微軟最有價值專家(ASP.NET) 連任第四屆
藍色小舖 資訊專家貢獻獎
demo小鋪 作者
twMVC 聯合創辦人之一
講者介紹
2
此次內容有很多爛哏，笑不出來也請笑…
過程中如果有任何問題歡迎打斷
隨時歡迎上廁所，不用怕傷了我的心。
講電話請離席，我們不想知道你的祕密。
本投影片所包含的商標與文字皆屬原著作者所有。
本投影片使用的圖片皆從網路搜尋。
預防針
3
預防針
我看新聞都可以這樣寫來規避版權，我應該也可以吧
此次內容有很多爛哏，笑不出來也請笑…
過程中如果有任何問題歡迎打斷
隨時歡迎上廁所，不用怕傷了我的心。
講電話請離席，我們不想知道你的祕密。
本投影片所包含的商標與文字皆屬原著作者所有。
本投影片使用的圖片皆從網路搜尋。
4
活動頁面使用者回填的資料都很假？
電話填寫不確實資料庫很髒？
每個欄位都要驗證很麻煩，驗證重點就好！
前端驗證只是帥不想花時間寫？
寫好前端頁面就軟了，後端就相信前端吧？
你有沒有過以下情境？
5
你有沒有過？
活動頁面使用者回填的資料都很假？
電話填寫不確實資料庫很髒？
每個欄位都要驗證很麻煩，驗證重點就好！
前端驗證只是帥不想花時間寫？
寫好前端頁面就軟了，後端就相信前端吧？
6
你的網站一絲不掛嗎？
7
不做驗證的十個理由？
8
因為你懶
因為你懶
因為你懶
因為你懶
因為你懶
因為你懶
因為你懶
因為你懶
因為你懶
因為你懶
不做驗證的十個理由？
9
如果驗證是要我們焦頭爛額 那我就讓你們看見內建的驕傲
10
從 ASP.NET MVC 3.0 以後改用 jQuery 實作
jQuery.Validate
擴充方便
IClientValidatable
IValidatableObject
ASP.NET MVC 內建驗證的好處
11
從 ASP.NET MVC 3.0 以後改用 jQuery 實作
jQuery.Validate
擴充方便
IClientValidatable
IValidatableObject
ASP.NET MVC 內建驗證的好處
記住他們就夠了，一直就在這轉了
12
ASP.NET MVC 內建驗證的好處
從 ASP.NET MVC 3.0 以後改用 jQuery 實作
jQuery.Validate
擴充方便
IClientValidatable
IValidatableObject
一次的工就可以實作前後端驗證
記住他們就夠了，一直就在這轉了
13
從 ASP.NET MVC 3.0 以後改用 jQuery 實作
jQuery.Validate
擴充方便
IClientValidatable
IValidatableObject
一次的工就可以實作前後端驗證
ASP.NET MVC 內建驗證的好處
理論上
記住他們就夠了，一直就在這轉了
14
從 ASP.NET MVC 3.0 以後改用 jQuery 實作
jQuery.Validate
擴充方便
IClientValidatable
IValidatableObject
一次的工就可以實作前後端驗證
Unobtrusive
ASP.NET MVC 內建驗證的好處
理論上
記住他們就夠了，一直就在這轉了
15
Required
• 不可空白
StringLength
• 字串長度範圍
Compare
• 比對
RegularExpression
• 正則表示式
Remote
• 真後端假前端自定驗證
AllowHtml
• 反 HTML 驗證
ASP.NET MVC 內建驗證有哪些
16
Required
不可空白
StringLength
最大字數限制
最小字數限制
字數範圍限制
Compare
欄位值比較
ASP.NET MVC 內建驗證介紹
17
18
RegularExpression
正則表示式
超強
ASP.NET MVC 內建驗證介紹
19
20
RegularExpression
正則表示式
超強
ASP.NET MVC 內建驗證介紹
21
RegularExpression
正則表示式
超強
ASP.NET MVC 內建驗證介紹
^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$
22
RegularExpression
正則表示式
超強
HTML 會透漏 Pattern
ASP.NET MVC 內建驗證介紹
23
RegularExpression
正則表示式
超強
HTML 會透漏 Pattern
安全性上的隱憂 圖片解千愁
微軟釋出的免費工具 SDL Regex Fuzzer http://www.microsoft.com/en-us/download/details.aspx?id=20095
ASP.NET MVC 內建驗證
• http://msdn.microsoft.com/zh-tw/magazine/ff646973.aspx#MtViewDropDownText • http://www.dotblogs.com.tw/johnny/archive/2010/09/08/17607.aspx
24
Remote
利用 AJAX 達到前端驗證，後端執行
什麼都能玩
效能相當優
ASP.NET MVC 內建驗證介紹
25
26
Remote
利用 AJAX 達到前端驗證，後端執行
什麼都能玩
效能相當優
ASP.NET MVC 內建驗證介紹
http://goo.gl/Z5Yhi
但是有 Bug ´_ゝ`
27
Remote
利用 AJAX 達到前端驗證，後端執行
什麼都能玩
效能相當優
在 Area 中無法正確呼叫的解法參考
http://demo.tc/Post/756
ASP.NET MVC 內建驗證介紹
但是有 Bug ´_ゝ`
28
29
Remote
利用 AJAX 達到前端驗證，後端執行
什麼都能玩
效能相當優
在 Area 中無法正確呼叫
ASP.NET MVC 內建驗證介紹
但是有 Bug ´_ゝ`
不過還有地雷 …
30
Remote
利用 AJAX 達到前端驗證，後端執行
什麼都能玩
效能相當優
在 Area 中無法正確呼叫
後端是不會理會 Remote 的
ASP.NET MVC 內建驗證介紹
不過還有地雷 …
但是有 Bug ´_ゝ`
31
32
33
AllowHtml
可個別允許單一欄位輸入 HTML
優點
不必修改 <httpRun time RequestValidationMode="2.0" />
比 [ValidateInput(false)] 安全
缺點
不得使用 FormCollection
ASP.NET MVC 內建驗證介紹
34
35
基於 jQuery Validate擴充
Bool
SingleVal
MinMax
Method
自定驗證
36
基於 jQuery Validate擴充
Bool
SingleVal
MinMax
Method
自定驗證
37
38
沒有前端阿
39
40
必須將此類別宣告為 sealed class
需要繼承 ValidationAttribute 抽象類別
必須覆寫 IsValid 方法
GetClientValidationRules的ValidationType一定要小
寫
撰寫自定驗證注意事項
41
統一擴充於單一 js
不透過 Submit 呼叫驗證方法
前端驗證小技巧
42
商業邏輯驗證
沒有前端驗證
可以視為資料乾淨的最後防線
自定驗證（Model層級
43
44
表單驗證還不寫嗎？
45
表單驗證還不寫嗎？
46
聯絡資訊
Blog： http://demo.tc
Google+： http://demo.tc/+
Facebook： https://fb.me/demo.fan
Plurk： http://plurk.com/demoshop
47
http://is.gd/XFN6Wk (所有 ASP.NET MVC3 驗證介紹實作與擴充 系列的文章 第1頁 | demo小鋪)
衍生學習
每週小型聚會，不定期有主題
固定於每週四 19:30-21:30，不改時間，逢國定假日暫停一次
議程會提前排定，也歡迎各位參加者分享開發經驗
舉辦不定期研討會
相關消息請密切注意 http://mvc.tw
49
twMVC 每週聚會
http://mvc.tw
台灣 ASP.NET MVC 專業推廣團隊