Chapter 6

1. Chapter 6 資料驗證控制項

2. 本章提要 • 6 - 1 為什麼需要資料驗證 • 6 - 2 RequiredFieldValidator 控制項 • 6 - 3 驗證資料控制項的基本屬性 • 6 - 4 RangeValidator 控制項－檢查範圍 • 6 - 5 CompareValidator 控制項－比較輸入值 • 6 - 6 RegularExpressionValidator 控制項－以規則運算式作檢查

3. 本章提要 • 6 - 7 CustomValidator 控制項－自訂檢查規則 • 6 - 8 ValidationSummary 控制項－匯集錯誤訊息

4. 6 - 1 為什麼需要資料驗證 • 資料驗證的用途 • ASP.NET 的驗證控制項

5. 資料驗證的用途 • 網頁程式經常會需要使用者輸入資料, 或是選擇相關選項之後, 才能依照這些資料進行正常的處理。 • 例如會員註冊機制一定要使用者輸入帳號名稱與密碼, 否則便無法新增帳號。 • 為了讓程式可以正常執行, 我們會希望程式接收到的資料格式是正常的, 所以需檢查使用者所輸入的資料。

6. 資料驗證的用途 • 例如使用者在電話欄位輸入 abcd, 這就是很明顯的錯誤資料, 不論使用者是有意還是不小心打錯, 只要適當地顯示提醒的訊息, 便能讓使用者輸入正確的資料。 • 所以本章所討論的資料驗證, 便是說明如何利用 ASP.NET 提供的控制項, 驗證資料是否合乎我們所需的格式或是範圍。

7. ASP.NET 的驗證控制項 • 傳統的資料驗證作法, 是在程式碼中使用 If 逐一判斷各欄位的值, 寫起來瑣碎又麻煩。還好 ASP.NET 已經提供了數個常用的驗證控制項, 讓我們可以很方便地驗證使用者輸入的資料。 • 下表簡要說明 ASP.NET 的資料驗證控制項：

8. ASP.NET 的驗證控制項

9. 6 - 2 RequiredFieldValidator 控制項 • RequiredFieldValidator 控制項使用方式 • 欄位的初始值

10. RequiredFieldValidator 控制項使用方式 • 網頁程式常常會要求使用者一定要輸入某些資料, 例如註冊時要輸入帳號名稱, 聯絡客服時要輸入姓名電話...等, 這時候就可以使用 RequiredFieldValidator 控制項來檢查這些資料是否都已經輸入。

11. RequiredFieldValidator 控制項使用方式 • 例如下面網頁要求使用者一定要輸入姓名：

12. RequiredFieldValidator 控制項使用方式 • 上面程式允許使用者不輸入職業和興趣, 但是要求一定要有姓名, 如果檢查發現使用者忘記輸入姓名, 則會顯示錯誤訊息。 • 在 ASP.NET 中要製作如此功能並不需撰寫程式, 只要加入 RequiredFieldValidator 控制項, 並且設定必要屬性即可。 • 以上述程式為例, RequiredFieldValidator 控制項需做如下的設定：

13. RequiredFieldValidator 控制項使用方式

14. RequiredFieldValidator 控制項使用方式 • ControlToValidate 屬性代表驗證控制項要檢查的控制項, 上面設定為 "Textbox1", 便表示 RequiredFieldValidator 控制項會檢查 Textbox1 控制項是否有輸入, 如果驗證不通過, 就會依照 ErrorMessage 屬性的設定來顯示錯誤訊息。 • 完成上述設計, 將網頁存檔即可運作, 一行程式都不用寫, ASP.NET 即為我們完成資料驗證的功能。

15. 欄位的初始值 • 有時候我們會在欄位內放一些預設文字, 例如：

16. 欄位的初始值 • 如果使用者直接按下按鈕, 會送出 “找書嗎？” 這個字串, 但這顯然不是使用者自行輸入的資料, 所以此時必須在 RequiredFieldValidator 控制項的 InitialValue 屬性指定一個初始值。 • 以上例來說即需設定為 “找書嗎？”, 如此 RequiredFieldValidator 控制項比對之後發現收到的字串等於初始值, 表示使用者並未輸入資料, 便不會讓驗證通過。

17. 6 - 3 驗證資料控制項的基本屬性 • 其他 ASP.NET 驗證控制項的基本使用方式都與前述 RequiredFieldValidator 類似：依照需求在 Web Form 加入驗證控制項, 然後設定要檢查的控制項以及錯誤訊息。 • 如此程式執行時就會進行檢查, 不通過就會在驗證控制項所在位置顯示錯誤訊息。

18. 驗證資料控制項的基本屬性 • 本節隨後將陸續說明多個可用於 RequiredFieldValidator 控制項及其他驗證控制項的基本屬性, 所以 6-4 節之後若遇到這些屬性, 便不再重複說明。 • 下表列出驗證資料控制項的基本屬性：

19. 驗證資料控制項的基本屬性

20. Text 與 ErrorMessage 屬性 • 前面我們設定 RequiredFieldValidator 控制項的屬性時, 除了 ErrorMessage 屬性以外, 還會看到一個 Text 屬性。 • 如果設定了 Text 屬性, 則控制項顯示的錯誤訊息就會換成 Text 屬性內的文字：

21. Text 與 ErrorMessage 屬性

22. Text 與 ErrorMessage 屬性 • 因此 Text 與 ErrorMessage 屬性都可以設定錯誤訊息, 但是以 Text 屬性為優先。 • 不過如果使用 6-8 節介紹的 ValidationSummary 控制項匯集並統一顯示錯誤訊息時, ValidationSummary 就會優先讀取各驗證控制項的 ErrorMessage 屬性來匯集錯誤訊息。

23. 是否通過驗證的 IsValid 屬性 • 如果程式要檢查輸入的資料是否已通過驗證, 只需判斷驗證控制項的 IsValid 屬性即可。 • 例如要先確定使用者已經輸入姓名, 然後程式才會將資料送出：

24. 是否通過驗證的 IsValid 屬性

25. 是否通過驗證的 IsValid 屬性 • 由於驗證控制項執行驗證程序後, 若目標通過驗證沒有錯誤, 驗證控制項的 IsValid 屬性便會設定為 True；而如果無法通過驗證, 則 IsValid 屬性就會設定為 False。 • 所以只要讀取驗證控制項的 IsValid 屬性, 就能知道驗證是否通過。 • 以下將實作上面例子, 請如下在 Web Form 建立控制項並設定屬性：

26. 是否通過驗證的 IsValid 屬性

27. 是否通過驗證的 IsValid 屬性 • 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

28. 是否通過驗證的 IsValid 屬性 • 如此即可依照驗證是否通過, 來進行相對應的程序。 • 如果網頁上放置了多個驗證控制項, 而您只想知道是否所有驗證都已經通過, 則可檢查 Page 物件 (此物件代表整個網頁) 的 IsValid 屬性 (Page.IsValid), 即可判斷是否所有驗證都已通過。

29. EnableClientScript 屬性－控制用戶端驗證 • 驗證控制項可以分別在用戶端與伺服器端進行驗證工作, 若在伺服器端驗證時, 其程序如下：

30. EnableClientScript 屬性－控制用戶端驗證 • 除了在伺服器端驗證外, 驗證控制項有一個 EnableClientScript 屬性, 可以設定是否使用 JavaScript 先在用戶端進行驗證。此屬性預設為 True, 表示網頁在 Postback 回伺服器前, 會先以 JavaScript 驗證資料。 • 例如使用瀏覽器檢視 Ch06-01.aspx, 觀察網頁原始檔時便能發現以下 JavaScript：

31. EnableClientScript 屬性－控制用戶端驗證

32. EnableClientScript 屬性－控制用戶端驗證 • 這些 JavaScript 程式都是 ASP.NET 自動產生的, 不需自行撰寫。使用 JavaScript 先在用戶端驗證具有以下優點： • 降低伺服器的負擔：因為 JavaScript 是在用戶端執行的程式, 所以可以先進行驗證, 確定資料全部正確後再 Postback 回伺服器, 減少用戶端與伺服器反覆來回傳送的次數, 伺服器執行程式的次數少了, 系統負擔自然也會降低。

33. EnableClientScript 屬性－控制用戶端驗證 • 使用者可得到立即回應：使用 JavaScript 時, 網頁不需要 Postback 回伺服器才能驗證, 所以使用者一輸入錯誤資料時, 即可立刻顯示錯誤訊息：

34. EnableClientScript 屬性－控制用戶端驗證 • 雖然使用 JavaScript 驗證相當方便而且快速, 不過為了避免使用者的瀏覽器不支援或關閉 JavaScript 功能, 即使設定 EnableClientScript 屬性為 True, 當網頁 Postback 回伺服器時, ASP.NET 仍然會再次進行驗證, 以確保資料的正確性。

35. Display 屬性－設定顯示方式 • 驗證控制項的 Display 屬性可以設定為 Static 或 Dynamic, 兩者顯示的差異說明如下： • Static：此為預設值, 不論是否發生錯誤, 驗證控制項都會固定佔用網頁上的位置：

36. Display 屬性－設定顯示方式

37. Display 屬性－設定顯示方式 • Dynamic：驗證控制項會動態顯示於網頁上, 所以若未發生錯誤, 驗證控制項不會佔用網頁任何的位置。 只有發生錯誤時, 驗證控制項才會顯示於網頁上：

38. Display 屬性－設定顯示方式

39. Display 屬性－設定顯示方式 • 從上面可以看到, 不論是否顯示錯誤訊息, 若 Display 屬性設定為 Static, 驗證控制項都會固定配置在姓名與職業兩欄位間的空間。 • 如果設定為 Dynamic, 驗證控制項一開始不會配置空間, 當需要顯示錯誤訊息時, 才會突然從姓名與職業兩欄位之間『冒出來』。

40. Display 屬性－設定顯示方式 • 所以 Display 屬性設定為 Dynamic 時, 因為不用配置空間給尚未產生的錯誤訊息, 所以能讓網頁自動顯示較佳的版面, 但是缺點則是錯誤訊息『冒出來』時, 可能會影響原先的排版效果。 • 除了 Static 與 Dynamic 外, Display 屬性還可以設定為 None, 表示不配置空間, 也不顯示錯誤訊息。此設定通常與 ValidationSummary 控制項一起使用, 因此留待 6-8 節另行說明。

41. 6 - 4 RangeValidator 控制項－檢查範圍 • 除了檢查有沒有輸入以外, 資料的正確性也很重要。本節將說明可檢查輸入是否超過範圍的 RangeValidator 控制項。

42. 使用 RangeValidator 控制項檢查範圍 • RangeValidator 控制項可以用來檢查輸入是否超過上限或低於下限, 除了 6-3 節說明的基本屬性以外, RangeValidator 控制項還有以下三個重要的屬性：

43. 使用 RangeValidator 控制項檢查範圍

44. 使用 RangeValidator 控制項檢查範圍 • 請注意 Type 屬性一定要設定正確的資料型別, 否則會產生錯誤的驗證結果。 • 例如假設筆者想要檢查上下限範圍為數字 1 ~ 60, 但是不小心將 Type 屬性設定為 String, 則使用者輸入 7 就會發生無法通過驗證的情形。 • 因為使用 String 型別比較時, ASP.NET 會使用字元的 UTF-8 編碼來進行比較, 而 7 的編碼大於 6, 所以便無法通過驗證。

45. 使用 RangeValidator 控制項檢查範圍 • 隨後將以範例實際說明 RangeValidator 控制項的使用方式。請如下在 Web Form 建立控制項並設定屬性：

46. 使用 RangeValidator 控制項檢查範圍

47. 使用 RangeValidator 控制項檢查範圍 • 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

48. 使用 RangeValidator 控制項檢查範圍 • 在瀏覽器檢視執行結果：

49. 使用 RangeValidator 控制項檢查範圍 • 請注意, 如果 RangeValidator 所驗證的控制項沒有輸入任何資料, 驗證仍然會通過, 所以可能會發生以下問題：

50. 使用 RangeValidator 控制項檢查範圍 • 因此對於一定要輸入資料的欄位, 應搭配前一節所介紹的 RequiredFieldValidator 控制項, 檢查是否已經輸入資料：