Chapter 6 資料驗證控制項.

Presentation on theme: "Chapter 6 資料驗證控制項."— Presentation transcript:

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 控制項
欄位的初始值

10 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 控制項－檢查範圍

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 控制項檢查範圍

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

51 使用 RangeValidator 控制項檢查範圍
程式 Ch06-04.aspx 與前面 Ch06-03.aspx 類似, 只有 RangeValidator1.IsValid 改成 Page.IsValid, 以判斷是否所有驗證都已通過：

52 動態顯示不同的錯誤訊息 前面程式 Ch06-03.aspx 只能顯示單一錯誤訊息, 無法如下依據使用者輸入的金額顯示過高或是太低：

53 動態顯示不同的錯誤訊息 您可能已經想到, 這個功能可以藉由修改 Text 或 ErrorMessage 屬性來達成！這個想法是正確的, 但是除此之外還有一個必要的設定：將 EnableClientScript 屬性設定為 False：

54 動態顯示不同的錯誤訊息 因為修改 Text 或 ErrorMessage 屬性必須等網頁 Postback 回伺服器時才能進行, 如果 EnableClientScript 屬性保持預設值 True, 代表會在用戶端使用 JavaScript 先行驗證。 當使用者輸入錯誤資料時, 就會先在用戶端被擋下來, 網頁並不會 Postback 回伺服器, 如此便無法藉由修改 Text 或 ErrorMessage 屬性來動態顯示不同的錯誤訊息。

55 動態顯示不同的錯誤訊息 關閉 EnableClientScript 屬性之後, 即可在程式中依照不同的狀況, 將不同的錯誤訊息指定給 Text 或 ErrorMessage 屬性：

56 動態顯示不同的錯誤訊息

57 動態顯示不同的錯誤訊息 上面使用 If...ElseIf...的語法, 先檢查是否通過驗證, 若未通過則分別判斷金額過高或太低, 然後顯示對應的錯誤訊息。 除了 ErrorMessage 屬性以外, 其他屬性如 MinimumValue、MaximumValue...等也都可以視情況在程式中動態修改, 不過若要等資料 Postback 回來時才會進行修改, 也一樣要記得將 EnableClientScript 屬性設定為 False。

58 6 - 5 CompareValidator 控制項－比較輸入值

59 CompareValidator 控制項的屬性

60 CompareValidator 控制項的屬性

61 CompareValidator 控制項的屬性
Operator 可說是 CompareValidator 控制項最重要的屬性, 其可用的比較運算子如下：

62 CompareValidator 控制項的屬性
DataTypeCheck 的用途是檢查使用者輸入的資料是否可以轉為 Type 屬性所設定的型別。 舉例來說, 假設 Operator 屬性設定為 DataTypeCheck, Type 屬性設定為 Integer, 若使用者輸入 “1234” 即可通過驗證, 但如果輸入 “abcd” 或是 "1.234" 則無法通過驗證, 因為 "abcd" 與 "1.234" 都無法轉成 Integer 型別。

63 CompareValidator 控制項的屬性

64 將使用者的輸入與特定資料作比較 如果要將使用者的輸入與特定資料作比較, 例如下面程式會檢查除數, 將使用者的輸入與 0 作比較, 如果相等則顯示錯誤訊息：

65 將使用者的輸入與特定資料作比較 我們將以上面例子說明如何將使用者的輸入與特定資料作比較, 請在 Web Form 建立如下控制項並設定屬性：

66 將使用者的輸入與特定資料作比較

67 將使用者的輸入與特定資料作比較 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼即可完成：

68 比較兩個控制項的資料 除了比較特定資料以外, 有時候網頁也會需要比較使用者輸入的兩個資料：

69 比較兩個控制項的資料 為了比較兩個控制項, CompareValidator 控制項內有一個 ControlToCompare 屬性可以指定比較的控制項, 而 ControlToValidate 與 ControlToCompare 會依照 Operator 相比較：

70 比較兩個控制項的資料 如果使用其他比較運算子, 例如小於 (LessThan), 則 ASP.NET 會如下進行驗證：

71 比較兩個控制項的資料 以下將用實例為您示範如何比較兩個控制項的資料, 假設需要製作以下功能的程式：

72 比較兩個控制項的資料 為了製作上述功能的程式, 請如下在 Web Form 建立控制項並設定屬性：

73 比較兩個控制項的資料 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼即可完成：

74 比較兩個控制項的資料 因為相除後每人所得的糖果數量可能會出現小數的情形, 所以筆者使用 System.Math 命名空間下的 Floor() 方法 (這是 .NET Framework 所提供的方法, 詳細請參閱 3-10 節), 取得小於或等於相除結果的整數, 即可獲得合理的分配結果。

75 6 - 6 RegularExpressionValidator 控制項－以規則運算式作檢查

76 什麼是規則運算式 RegularExpressionValidator 控制項會使用規則運算式 (Regular Expression) 檢驗資料格式, 所謂規則運算式指的是一組描述字元組合與排列的樣式。 例如一想到身份證字號, 我們心中應該都會浮現一個印象：『最前面是 1 個英文字母, 後面再跟著 9 個數字』, 這個對於身份證字號的描述便是規則運算式。

77 什麼是規則運算式 所以當我們要使用 RegularExpressionValidator 控制項進行驗證時, 要先設定一組規則運算式, 描述整個字串如何組成與排列, ASP.NET 便會比對使用者輸入的資料是否符合此描述, 若不合則無法通過驗證。 VWD 已經內建了一些實用的規則運算式, 讓我們可以直接選用, 所以本章不會說明規則運算式的設計方式, 若您有興趣請自行參閱本書附錄 E。

78 RegularExpressionValidator 的使用方法
下面以檢查身份證字號的格式來示範如何使用 RegularExpressionValidator 控制項, 請如下在 Web Form 建立控制項並設定屬性：

79 RegularExpressionValidator 的使用方法

80 RegularExpressionValidator 的使用方法
在瀏覽器檢視執行結果： 所以在 ASP.NET 中, 不但一行程式都不用寫就可以驗證資料, 連常用的規則運算式都已經幫我們準備好, 直接套用即可。

81 6 - 7 CustomValidator 控制項－自訂檢查規則

82 CustomValidator 控制項的用途
ASP.NET 的驗證控制項雖然方便好用, 卻終究有其侷限性。舉例來說, 假設網頁需要檢查使用者輸入的是否為非週末的日期：

83 CustomValidator 控制項的用途

84 CustomValidator 控制項的用途
上面的功能便無法依靠之前介紹的控制項進行驗證, 所以 ASP.NET 另外提供了一個 CustomValidator 控制項, 可以讓我們自己寫一段程序來進行比對, 驗證工作便不會侷限於 ASP.NET 本身的檢查功能。

85 ServerValidate 事件 當網頁上面有 CustomValidator 控制項時, 一旦使用者輸入資料後, CustomValidator 控制項便會產生 ServerValidate 事件進行資料檢查, 因此我們要做的就是在此事件處理程序中撰寫自訂的檢查程式。

86 ServerValidate 事件 假設在 Web Form 上面建立了一個 ID 為 MyCheck 的 CustomValidator 控制項, 請在設計模式下雙按該控制項, 即可建立 MyCheck_ServerValidate 程序, 讓我們輸入檢查的程式：

87 ServerValidate 事件 其中 args 這個參數物件有下面兩個重要屬性：
args.IsValid：設定此次驗證是否通過。 args.Value：取得使用者輸入的資料。 所以程序中便可透過 args 物件, 取得使用者輸入值進行檢查, 並設定驗證是否通過。

88 ValidateEmptyText 屬性 除了 RequiredFieldValidator 以外, 其他驗證控制項在沒有輸入任何資料時仍然會通過驗證。 不過 CustomValidator 控制項則有一個 ValidateEmptyText 屬性, 可以設定當控制項內的資料為空白時, 是否要進行驗證。 ValidateEmptyText 屬性預設為 False, 表示不針對空白資料進行驗證, 所以對於要強制輸入的資料欄位, 請將此屬性設定為 True 。

89 以 CustomValidator 控制項自訂驗證規則的方式
下面將以『檢查日期是否為週末』的例子, 來示範如何使用 CustomValidator 控制項自訂驗證規則, 請在 Web Form 建立如下控制項並設定屬性：

90 以 CustomValidator 控制項自訂驗證規則的方式

91 以 CustomValidator 控制項自訂驗證規則的方式
接著請建立 CustomValidator1_ServerValidate、Calendar1_SelectionChanged 與 Submit_Click 等事件處理程序, 然後輸入以下程式碼：

92 以 CustomValidator 控制項自訂驗證規則的方式

93 以 CustomValidator 控制項自訂驗證規則的方式

94 以 CustomValidator 控制項自訂驗證規則的方式
第 26 行的 args.Value 屬性為使用者輸入的資料, 也就是 ControlToValidate 指定要檢查的控制項 (OffDay) 內的資料, 故 args.Value 與 OffDay.Text 兩個屬性所存取的資料是一樣的, 所以程式中也可以使用 OffDay.Text 取代 args.Value。 不過使用 args 物件的優點在於若未來要改檢查另一個控制項, 只要變更 ControlToValidate 屬性即可, 不用修改程式碼中的 OffDay.Text。

95 以 CustomValidator 控制項自訂驗證規則的方式
第 26 行使用 Date 型別的 DayOfWeek 屬性取得該日期為星期幾, 然後以 ToString 方法轉為字串, 此時會傳回 Monday、Saturday...等字串。如果不轉為字串, 則會傳回 0、1、2...等數字, 表示其為該星期的哪一天 (0 為星期天)。

96 CustomValidator 控制項的用戶端驗證
前面 6-9 頁提過驗證控制項會由 ASP.NET 自動建立 JavaScript 程式, 不過因為 CustomValidator 控制項的驗證功能是由使用者所自訂, ASP.NET 無法自動產生同一功能的 JavaScript 程式, 所以使用 CustomValidator 控制項時, 即使開啟 EnableClientScript 屬性, 也只能執行伺服器端的驗證。

97 CustomValidator 控制項的用戶端驗證
如果您想要進行用戶端驗證, 必須自行撰寫相關 Script 函式, 然後在 CustomValidator 控制項的 ClientValidationFunction 屬性指定函式的名稱, 才能執行用戶端的驗證工作。 因為 JavaScript 不屬於本書範圍, 所以此處不說明詳細的方法。

98 6 - 8 ValidationSummary 控制項－匯集錯誤訊息
使用 DisplayMode 屬性調整顯示格式 使用 ShowMessageBox 屬性顯示錯誤交談窗

99 ValidationSummary 控制項的用途
例如在註冊網頁中要如下顯示錯誤訊息：

100 ValidationSummary 控制項的用途

101 ValidationSummary 控制項的用途
驗證控制項會將錯誤訊息顯示在其所在處, 所以若只使用之前介紹的驗證控制項, 必須如下設計：

102 ValidationSummary 控制項的用途
因此, 為了方便處理, ASP.NET 便提供了 ValidationSummary 控制項, 可以更方便地讓錯誤訊息集中並且以統一的格式顯示。

103 使用 ValidationSummary 控制項匯集錯誤訊息
隨後將以上面的例子, 實際示範如何使用 ValidationSummary 控制項, 請如下在 Web Form 建立控制項並設定屬性：

104 使用 ValidationSummary 控制項匯集錯誤訊息

105 使用 ValidationSummary 控制項匯集錯誤訊息
而其他驗證控制項的 Dispaly 屬性設定為 "None", 表示不顯示錯誤訊息, 因此所有錯誤訊息便只由 ValidationSummary 集中並以統一的格式來顯示, 不需要修改原有控制項的位置或格式。

106 使用 ValidationSummary 控制項匯集錯誤訊息
當然我們也可以維持 Dispaly 屬性的設定, 讓其他控制項也顯示錯誤訊息：

107 使用 ValidationSummary 控制項匯集錯誤訊息
前面 6-7 頁曾經提到驗證控制項顯示錯誤訊息時會以 Text 屬性優先, 但是 ValidationSummary 控制項則以 ErrorMessage 屬性為優先, 所以我們可以利用此特性產生如下效果：

108 使用 ValidationSummary 控制項匯集錯誤訊息

109 使用 ValidationSummary 控制項匯集錯誤訊息
此外, 我們還可以使用 ValidationSummary 控制項的 HeaderText 屬性設定標題：

110 使用 ValidationSummary 控制項匯集錯誤訊息
您應該也注意到了, 一旦在 Wizard 控制項中放入驗證控制項, 若驗證未通過, 便無法進入下一個步驟。 這是 ASP.NET 預設的行為, 並不需要額外的設定。

111 使用 DisplayMode 屬性調整顯示格式
ValidationSummary 控制項預設會以條列的方式顯示錯誤訊息, 不過我們可以使用 DisplayMode 屬性調整其顯示的格式：

112 使用 DisplayMode 屬性調整顯示格式
其中 BulletList 就是前面看到的項目條列方式, 其他兩種設定值顯示的格式如下：

113 使用 ShowMessageBox 屬性顯示錯誤交談窗
ValidationSummary 控制項具備一個 ShowMessageBox 屬性, 若設定為 True, 表示除了在網頁上顯示錯誤訊息以外, 還會顯示錯誤交談窗：

114 使用 ShowMessageBox 屬性顯示錯誤交談窗

115 使用 ShowMessageBox 屬性顯示錯誤交談窗
如果想讓錯誤訊息只顯示於交談窗, 網頁上不要顯示錯誤訊息, 只要將 ShowSummary 設定為 False 即可：

116 使用 ShowMessageBox 屬性顯示錯誤交談窗