ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3

撰寫網頁的時候你是否對於表單驗證很厭煩？

尤其現在網頁對於使用者經驗（UX）相當的注重，之前我們可以偷懶只寫後端驗證，現在不做前端驗證會被笑...

俗話說的好，程式設計師要懶，本次課程將和你介紹如何利用 ASP.NET MVC 內建的招式簡單的做出品質不錯的前後端驗證，而且彈性超大，你愛怎麼擴充就怎麼擴充，經常性寫到表單的開發人員千萬不要錯過。

http://mvc.tw

Transcript

1. ASP.NET MVC Validation 快速開發系列
2.  美商微軟最有價值專家(ASP.NET) 連任第四屆  藍色小舖 資訊專家貢獻獎  demo小鋪 作者  twMVC 聯合創辦人之一 講者介紹 2
3.  此次內容有很多爛哏，笑不出來也請笑…  過程中如果有任何問題歡迎打斷  隨時歡迎上廁所，不用怕傷了我的心。  講電話請離席，我們不想知道你的祕密。  本投影片所包含的商標與文字皆屬原著作者所有。  本投影片使用的圖片皆從網路搜尋。 預防針 3
4. 預防針 我看新聞都可以這樣寫來規避版權，我應該也可以吧  此次內容有很多爛哏，笑不出來也請笑…  過程中如果有任何問題歡迎打斷  隨時歡迎上廁所，不用怕傷了我的心。  講電話請離席，我們不想知道你的祕密。  本投影片所包含的商標與文字皆屬原著作者所有。  本投影片使用的圖片皆從網路搜尋。 4
5.  活動頁面使用者回填的資料都很假？  電話填寫不確實資料庫很髒？  每個欄位都要驗證很麻煩，驗證重點就好！  前端驗證只是帥不想花時間寫？  寫好前端頁面就軟了，後端就相信前端吧？ 你有沒有過以下情境？ 5
6. 你有沒有過？  活動頁面使用者回填的資料都很假？  電話填寫不確實資料庫很髒？  每個欄位都要驗證很麻煩，驗證重點就好！  前端驗證只是帥不想花時間寫？  寫好前端頁面就軟了，後端就相信前端吧？ 6
7. 你的網站一絲不掛嗎？ 7
8. 不做驗證的十個理由？ 8
9.  因為你懶  因為你懶  因為你懶  因為你懶  因為你懶  因為你懶  因為你懶  因為你懶  因為你懶  因為你懶 不做驗證的十個理由？ 9
10. 如果驗證是要我們焦頭爛額 那我就讓你們看見內建的驕傲 10
11. 從 ASP.NET MVC 3.0 以後改用 jQuery 實作  jQuery.Validate 擴充方便  IClientValidatable  IValidatableObject ASP.NET MVC 內建驗證的好處 11
12. 從 ASP.NET MVC 3.0 以後改用 jQuery 實作  jQuery.Validate 擴充方便  IClientValidatable  IValidatableObject ASP.NET MVC 內建驗證的好處 記住他們就夠了，一直就在這轉了 12
13. ASP.NET MVC 內建驗證的好處 從 ASP.NET MVC 3.0 以後改用 jQuery 實作  jQuery.Validate 擴充方便  IClientValidatable  IValidatableObject 一次的工就可以實作前後端驗證 記住他們就夠了，一直就在這轉了 13
14. 從 ASP.NET MVC 3.0 以後改用 jQuery 實作  jQuery.Validate 擴充方便  IClientValidatable  IValidatableObject 一次的工就可以實作前後端驗證 ASP.NET MVC 內建驗證的好處 理論上 記住他們就夠了，一直就在這轉了 14
15. 從 ASP.NET MVC 3.0 以後改用 jQuery 實作  jQuery.Validate 擴充方便  IClientValidatable  IValidatableObject 一次的工就可以實作前後端驗證  Unobtrusive ASP.NET MVC 內建驗證的好處 理論上 記住他們就夠了，一直就在這轉了 15
16. Required • 不可空白 StringLength • 字串長度範圍 Compare • 比對 RegularExpression • 正則表示式 Remote • 真後端假前端自定驗證 AllowHtml • 反 HTML 驗證 ASP.NET MVC 內建驗證有哪些 16
17.  Required  不可空白  StringLength  最大字數限制  最小字數限制  字數範圍限制  Compare  欄位值比較 ASP.NET MVC 內建驗證介紹 17
19.  RegularExpression  正則表示式  超強 ASP.NET MVC 內建驗證介紹 19
21.  RegularExpression  正則表示式  超強 ASP.NET MVC 內建驗證介紹 21
22.  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
23.  RegularExpression  正則表示式  超強  HTML 會透漏 Pattern ASP.NET MVC 內建驗證介紹 23
24.  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
25.  Remote  利用 AJAX 達到前端驗證，後端執行  什麼都能玩  效能相當優 ASP.NET MVC 內建驗證介紹 25
27.  Remote  利用 AJAX 達到前端驗證，後端執行  什麼都能玩  效能相當優 ASP.NET MVC 內建驗證介紹 http://goo.gl/Z5Yhi 但是有 Bug ´_ゝ` 27
28.  Remote  利用 AJAX 達到前端驗證，後端執行  什麼都能玩  效能相當優  在 Area 中無法正確呼叫的解法參考 http://demo.tc/Post/756 ASP.NET MVC 內建驗證介紹 但是有 Bug ´_ゝ` 28
30.  Remote  利用 AJAX 達到前端驗證，後端執行  什麼都能玩  效能相當優  在 Area 中無法正確呼叫 ASP.NET MVC 內建驗證介紹 但是有 Bug ´_ゝ` 不過還有地雷 … 30
31.  Remote  利用 AJAX 達到前端驗證，後端執行  什麼都能玩  效能相當優  在 Area 中無法正確呼叫  後端是不會理會 Remote 的 ASP.NET MVC 內建驗證介紹 不過還有地雷 … 但是有 Bug ´_ゝ` 31
34.  AllowHtml  可個別允許單一欄位輸入 HTML  優點  不必修改 <httpRun time RequestValidationMode="2.0" />  比 [ValidateInput(false)] 安全  缺點  不得使用 FormCollection ASP.NET MVC 內建驗證介紹 34
36.  基於 jQuery Validate擴充  Bool  SingleVal  MinMax  Method 自定驗證 36
37.  基於 jQuery Validate擴充  Bool  SingleVal  MinMax  Method 自定驗證 37
39. 沒有前端阿 39
41.  必須將此類別宣告為 sealed class  需要繼承 ValidationAttribute 抽象類別  必須覆寫 IsValid 方法  GetClientValidationRules的ValidationType一定要小 寫 撰寫自定驗證注意事項 41
42.  統一擴充於單一 js  不透過 Submit 呼叫驗證方法 前端驗證小技巧 42
43.  商業邏輯驗證  沒有前端驗證  可以視為資料乾淨的最後防線 自定驗證（Model層級 43
45. 表單驗證還不寫嗎？ 45
46. 表單驗證還不寫嗎？ 46
47. 聯絡資訊 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小鋪) 衍生學習
48. 48 線上問券麻煩填寫 http://mvc.tw
49.  每週小型聚會，不定期有主題  固定於每週四 19:30-21:30，不改時間，逢國定假日暫停一次  議程會提前排定，也歡迎各位參加者分享開發經驗  舉辦不定期研討會  相關消息請密切注意 http://mvc.tw 49 twMVC 每週聚會
50. http://mvc.tw 台灣 ASP.NET MVC 專業推廣團隊