ASP.NET - 演練：驗證 Web 窗體頁中的使用者輸入

本演練闡釋如何使用 ASP.NET 驗證程式控件檢查網頁中的使用者輸入。您無需代碼就可以使用某些自動執行所有檢查的控件。此外，您還将通過編寫代碼建立一個自定義驗證程式，該過程将示範如何将您自己的邏輯添加到頁的驗證架構中。最後，您将學習如何根據使用者在頁上所做的選擇有條件地驗證使用者輸入。

在本演練中，您将為網站建立一個允許通路者申請預訂的頁面。由于本演練的目的是為闡釋驗證，是以預訂什麼對本演練并不重要（例如，可預訂餐廳、社群中心會議室或别的地點），并且該頁并不真正處理預訂。

您所建立的該頁将提示使用者輸入電子郵件位址、預訂人數和預訂日期。該頁還允許使用者申請其預訂的電話确認。（如果該頁實作該功能，則該功能預設為電子郵件确認。）

安全說明： 預設情況下，Web 窗體頁将自動驗證是否有惡意使用者試圖将腳本發送到您的應用程式中。

通過此演練，您将學會如何執行以下任務：

·使用驗證程式控件檢查 ASP.NET 網頁中的使用者輸入。

·設定顯示驗證錯誤消息的格式。

·通過編寫代碼建立自定義驗證。

一、建立網站和網頁

在本演練的第一部分，将建立可以使用樣式的網站和網頁。

如果您已在 Visual Studio 中建立了一個網站（例如，通過主題演練：在 Visual Web Developer 中建立基本網頁），則可以使用該網站并跳到本演練後面的“添加控件”部分。否則，按照下面的步驟建立一個新的網站和網頁。

1.1、建立檔案系統網站

1、打開 Visual Studio。

2、在“檔案”菜單上單擊“建立網站”。 “建立網站”對話框随即出現。

3、在“語言”清單中，單擊您想使用的程式設計語言。 您選擇的程式設計語言将是網站的預設語言，但您可以為每個頁面分别設定程式設計語言。

4、在“Visual Studio 已安裝的模闆”之下單擊“ASP.NET 網站”。

5、在“位置”框中輸入要儲存網站頁面的檔案夾的名稱。 例如，鍵入檔案夾名“C:\WebSites”。

6、單擊“确定”。 Visual Studio 建立該檔案夾和一個名為 Default.aspx 的新頁。

1.2、添加控件

您将隻使用幾個控件提示使用者輸入預訂所需的資訊。

1.3、添加控件和文本

1、切換到“設計”視圖。

2、鍵入一個頁标題，如“Submit a Reservation”（送出預訂）。

3、從“工具箱”的“标準”組中，将下列控件拖到該頁上并按訓示設定其屬性。

a. 控件	b. 屬性
TextBox	ID：“textEmail”
TextBox	ID：“textNumberInParty”
TextBox	ID：“textPreferredDate”
Button	ID：“buttonSubmit” Text：“Submit Request”（送出申請） ValidationGroup：“AllValidators”
Label	ID：“labelMessage” Text：（空白）

說明： 頁的具體布局無關緊要。

4、在上述這些文本框之前鍵入文本作為标題。

5、輕按兩下 Submit Request 按鈕以為其 Click 事件建立一個處理程式，然後添加以下突出顯示的代碼：

protected void buttonSubmit_Click(object sender, EventArgs e)

{

if (Page.IsValid) { labelMessage.Text = "Your reservation has been processed."; }

}

該按鈕處理程式隻顯示一條消息；它不執行實際的處理操作。但顯示該消息将允許您在本演練的後面部分測試驗證結果。

6、切換到“設計”視圖，輕按兩下該頁上的空白區域以建立一個 Page_Load 處理程式，然後添加以下突出顯示的代碼：

protected void Page_Load(object sender, EventArgs e)

{

labelMessage.Text = "";

}

在通過所有驗證後，該代碼将清除該頁上所顯示的消息。該代碼對本演練後面部分的測試很有用。

二、添加基本驗證

對于您虛構的預訂系統，您将希望執行下列驗證檢查：

·必須填寫電子郵件位址，并且該項的格式設定必須正确；例如，[email protected]。（通常不可能檢查某一電子郵件位址是否是某人的真實位址，但可以檢查該位址是否符合電子郵件位址的正确格式。）

·必須填寫人數，并且該項必須是數字。

·必須填寫預訂日期。

可以使用驗證程式控件添加所有這些驗證，這些控件将為您執行所有檢查并自動顯示錯誤。

說明： 在本演練後面部分，您将添加另一項檢查以确定使用者是否輸入了有效日期。

2.1、添加基本驗證

1、切換到“設計”視圖。從“工具箱”的“驗證”組中，拖動一個 RequiredFieldValidator 控件并将該控件放在 textEmail 文本框旁邊。

2、設定 RequiredFieldValidator 控件的以下屬性：

屬性	設定
ControlToValidate	textEmail 将該驗證程式控件綁定到要驗證其内容的文本框。
Display	Dynamic 指定隻在顯示錯誤需要時才呈現該控件（并且該控件占用頁面上的空間）。
ErrorMessage	必須填寫電子郵件位址。 顯示摘要錯誤中的文本，将在本演練後面部配置設定置該屬性。
Text	* 星号是訓示某字段必填的簡便方法。隻在出現錯誤時，才顯示該文本。
ValidationGroup	AllValidators 與單選按鈕一樣，可以将驗證程式分組成視為單元的各個組。您将在本演練後面部分學習有關對驗證程式進行分組的更多内容。

您現在已完成的任務是添加一個測試以确定使用者是否輸入了電子郵件位址。該驗證程式控件将執行所有檢查并在需要時顯示錯誤，這需要您向該頁添加代碼。

3、從“工具箱”的“驗證”組中，拖動一個 RegularExpressionValidator 控件并将該控件放在剛添加的 RequiredFieldValidator 旁邊。

4、設定 RegularExpressionValidator 控件的以下屬性：

a. 屬性	b. 設定
ControlToValidate	textEmail 您要再次對電子郵件框中的使用者輸入進行驗證。
Display	Dynamic
ErrorMessage	電子郵件位址必須采用 [email protected] 格式。 一個較長的錯誤消息。
Text	無效格式！ 一個較短的錯誤消息。
ValidationGroup	AllValidators 與單選按鈕一樣，可以将驗證程式分組成視為單元的各個組。您将在本演練後面部分學習有關對驗證程式進行分組的更多内容。

5、在 RegularExpressionValidator 控件仍處于標明狀态時，在“屬性”視窗中單擊 ValidationExpression 框中的省略号按鈕。

正規表達式構成了可用于在字元串中查找精确定義格式的語言。在 RegularExpressionValidator 控件中，為有效格式定義一個正規表達式；在本例中，是有效電子郵件位址的格式。

“正規表達式編輯器”包含一個常用正規表達式清單，這樣您無需了解正規表達式文法就可以使用驗證程式控件。

6、在“标準表達式”清單中，單擊“Internet 電子郵件位址”。 電子郵件位址的正規表達式随即将放入“驗證表達式”框中。

7、單擊“确定”關閉對話框。

8、按照步驟 1 至 3 中的說明添加另一個 RequiredFieldValidator 控件。但這一次将該控件綁定到 textNumberInParty 文本框并将其 ErrorMessage 屬性設定為“Please indicate how many people are in your party”（請指出團隊人數）。

9、從“工具箱”的“驗證”組中，拖動一個 RangeValidator 控件并将該控件放在剛添加的 RequiredFieldValidator 旁邊。

10、設定 RangeValidator 控件的以下屬性：

a. 屬性	b. 設定
ControlToValidate	textNumberInParty
Display	Dynamic
ErrorMessage	為團隊人數輸入一個介于 1 和 20 之間的數字。
MaximumValue	20 在本例中，為任意較大的值。
MinimumValue	1 在此申請中，至少需要預訂一人。
Text	輸入一個介于 1 和 20 之間的數字。
Type	Integer
ValidationGroup	AllValidators

RangeValidator 控件執行下面兩個功能：首先確定使用者所輸入的資料是數字，然後檢查該數字是否在指定的最小值和最大值之間。

2.2、測試該頁

現在可以測試到目前為止所建立的驗證程式控件。

2.3、測試基本驗證

1、按 Ctrl+F5 運作該頁。

2、當在浏覽器中顯示該頁時，單擊 Submit Request 按鈕。

由于您尚未填寫某些必填字段，是以顯示了幾個驗證錯誤。您會立即看到這些驗證錯誤，并且未能送出該頁。預設情況下，驗證程式控件将用戶端 ECMAScript (JavaScript) 插入該頁中以在浏覽器中執行驗證檢查。這為使用者提供了有關驗證錯誤的即時回報；在不使用用戶端腳本的情況下，對驗證錯誤的檢查将需要執行一個到伺服器的往返過程，該過程有時可能會很慢。實際上，直到所有用戶端驗證檢查都通過後，才能送出該頁。（在送出該頁時，作為一項安全預防措施将再次執行相同的驗證檢查。）

檢查對 textEmail 文本框的驗證，方法是鍵入一個無效的電子郵件位址，然後再輸入一個有效的電子郵件位址（如您自己的位址）。

3、檢查是否隻能在“Number of people in party”（團隊人數）文本框中輸入介于 1 和 20 之間的數值。

4、在輸入有效值後，單擊“Submit Request”（送出申請）按鈕。如果所有控件都通過了驗證，您将會看到消息“Your reservation has been processed”（您的預訂已得到處理）。

5、在确認驗證正常工作後，關閉浏覽器。

6、如果驗證未正常工作，則複查上面列出的所有屬性設定，然後再次運作該頁。

三、顯示錯誤資訊的其他方法

預設情況下，驗證程式控件就地顯示錯誤文本；也就是說，這些控件在其所在頁上的位置顯示其 Text 屬性值。有時，您可能希望用不同的方法顯示錯誤資訊。ASP.NET 驗證程式控件為您提供了這些附加選項：

·将所有驗證錯誤彙總在一個位置。可以另外執行此選項或用此選項代替就地顯示錯誤。顯示錯誤摘要還使您可以顯示較長的錯誤消息。

·在浏覽器中顯示一個包含錯誤資訊的彈出消息。該選項隻适用于啟用腳本的浏覽器。

可以使用 ValidationSummary 控件添加這兩個顯示選項。在本部分演練中，您将為該頁添加這兩個顯示功能。

用其他方法顯示驗證資訊