逐步解說:驗證 Web Form 網頁中的使用者輸入
更新:2007 年 11 月
這個逐步解說說明如何使用 ASP.NET 驗證程式控制項檢查 Web 網頁中的使用者輸入。您將使用一些可自動執行所有檢查的控制項,而不需要任何程式碼。您還將使用撰寫的程式碼建立自訂驗證程式,其中說明您如何能夠將自己的邏輯加入網頁中的驗證架構。最後,您將了解如何條件式地驗證使用者輸入,這取決於使用者在網頁中做出的選擇。
在逐步解說中,您將建立可讓造訪者要求預定的網站網頁。因為逐步解說的目的是說明驗證,所以預定的性質對此逐步解說而言並不重要 (例如,可能是預定餐廳、社群中心會議室等),而且網頁實際上也不會處理預定。
您建立的網頁會提示使用者輸入電子郵件地址、要預定的人數和偏好日期。此網頁也允許使用者要求預定的電話確認 (如果實作的話,此網頁會預設為電子郵件確認)。
![]() |
---|
根據預設,Web Form 網頁會自動驗證,確保惡意使用者沒有試圖傳送指令碼到您的應用程式。如需詳細資訊,請參閱指令碼攻擊概觀。 |
在瀏覽這份逐步解說期間,您將了解如何:
使用驗證程式控制項檢查 ASP.NET Web 網頁中的使用者輸入。
格式化驗證錯誤訊息的顯示。
藉由撰寫程式碼建立自訂驗證。
必要條件
若要完成這個逐步解說,您必須要有:
- Visual Studio 和 .NET Framework。
建立網站和網頁
在逐步解說的第一部分中,您將建立可於其中使用樣式的網站和 Web 網頁。
如果您已在 Visual Studio 中建立了網站 (例如,藉由使用主題逐步解說:在 Visual Web Developer 中建立基本 Web 網頁),則可使用該網站,並跳至這個逐步解說中稍後的「加入控制項」。否則,使用下列步驟建立新的網站和網頁。
若要建立檔案系統網站
開啟 Visual Studio。
在 [檔案] 功能表上,按一下 [新網站]。
[新網站] 對話方塊隨即出現。
在 [語言] 清單中,請按一下您想要操作的程式語言。
您選擇的程式語言將變成網站的預設值,但您可以為每個網頁分別設定程式語言。
請在 [Visual Studio 安裝的範本] 下方,按一下 [ASP.NET 網站]。
在 [位置] 方塊中,輸入您想要用來保存網站頁面的資料夾名稱。
例如,輸入資料夾名稱 C:\WebSites。
按一下 [確定]。
Visual Studio 會建立資料夾和命名為 Default.aspx 的新頁面。
加入控制項
您只要使用幾個控制項,便可提示使用者輸入預定所需的資訊。
若要加入控制項和文字
切換至 [設計] 檢視。
輸入網頁標題,例如 [送出預定]。
從 [工具箱] 的 [標準] 群組中,將下列控制項拖曳至網頁,並根據指示設定其屬性。
控制項
屬性
ID:textEmail
ID:textNumberInParty
ID:textPreferredDate
ID:buttonSubmit
Text:Submit Request
ValidationGroup:AllValidators
ID:labelMessage
Text:(空白)
注意事項:
網頁的精確配置並不重要。
在文字方塊之前輸入文字做為標題。
按兩下 [Submit Request] 按鈕,以建立其 Click 事件的處理常式,然後加入下列粗體顯示的程式碼:
Protected Sub buttonSubmit_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If Page.IsValid Then labelMessage.Text = "Your reservation has been processed." End If End Sub
protected void buttonSubmit_Click(object sender, EventArgs e) { if (Page.IsValid) { labelMessage.Text = "Your reservation has been processed."; } }
按鈕處理常式只顯示訊息,它並不執行實際處理。不過,訊息顯示可讓您稍後在逐步解說中測試驗證的效果。
切換至 [設計] 檢視,按兩下網頁中的空白區域以建立 Page_Load 處理常式,然後加入下列粗體顯示的程式碼:
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As EventArgs) labelMessage.Text = "" End Sub
protected void Page_Load(object sender, EventArgs e) { labelMessage.Text = ""; }
所有的驗證都通過時,此程式碼會清除網頁顯示的訊息。這個程式碼可以協助逐步解說中稍後進行的測試。
加入基本驗證
對於您的虛擬預定系統,您將要強制執行下列驗證檢查:
電子郵件地址是必要項,而且必須設定正確的格式,例如 someone@example.com (通常,檢查電子郵件地址是否為某個人的真實地址並不實際,但您可以檢查該地址是否符合電子郵件地址的正確模式)。
人數也是必要項,而且必須是數字。
偏好日期是必要項。
您可以使用驗證程式控制項加入所有的驗證,這些控制項為您執行所有檢查並自動顯示錯誤。
![]() |
---|
稍後在本逐步解說中,您將加入另一個檢查,以確保使用者輸入有效的日期。 |
若要加入基本驗證
切換至 [設計] 檢視。從 [工具箱] 的 [驗證] 群組中,將 RequiredFieldValidator 控制項拖放到 textEmail 文字方塊旁邊。
設定 RequiredFieldValidator 控制項的下列屬性:
屬性
設定
textEmail
將驗證程式控制項繫結至您要驗證其內容的文字方塊。
動態
指定控制項只有在顯示錯誤需要時才會呈現 (並佔據網頁空間)。
電子郵件地址是必要項。
顯示摘要錯誤中的文字,您將在逐步解說中稍後設定它。
*
星號是表示欄位為必要項的一種常用方式。只有在發生錯誤時,才會顯示此文字。
AllValidators
如同使用選項按鈕一樣,您可以將驗證程式群組到視為一個單元的群組中。稍後在逐步解說中,您將了解群組驗證程式的詳細資訊。
您所做的是加入測試,以確定使用者輸入電子郵件地址。藉由要求您將程式碼加入網頁,驗證程式控制項會執行所有的檢查和錯誤顯示。
從 [工具箱] 的 [驗證] 群組中,將 RegularExpressionValidator 控制項拖放到您剛加入的 RequiredFieldValidator 旁邊。
設定 RegularExpressionValidator 控制項的下列屬性:
屬性
設定
textEmail
您正在重新驗證使用者在電子郵件方塊中輸入的內容。
動態
電子郵件地址的格式必須是 name@domain.xyz。
較長的錯誤訊息。
無效的格式!
簡短的錯誤訊息。
AllValidators
如同使用選項按鈕一樣,您可以將驗證程式群組到視為一個單元的群組中。稍後在逐步解說中,您將了解群組驗證程式的詳細資訊。
在 RegularExpressionValidator 控制項仍處於選取的情況下,在 [屬性] 視窗中,按一下 ValidationExpression 方塊中的省略按鈕。
規則運算式 (Regular Expression) 組成的語言可用於精確尋找字串中的已定義模式。在 RegularExpressionValidator 控制項中,您可為有效模式定義規則運算式,在這種情況下為有效的電子郵件地址模式。
[規則運算式編輯器] 包含常用規則運算式的清單,因此您無需了解規則運算式語法,就可以使用驗證程式控制項。
在 [標準運算式] 清單中,按一下 [網際網路電子郵件地址]。
便會將電子郵件地址的規則運算式置於 [驗證運算式] 方塊中。
按一下 [確定] 關閉對話方塊。
使用步驟 1-3 的指示,加入另一個 RequiredFieldValidator 控制項。不過,這次要將它繫結至 textNumberInParty 文字方塊,並將其 ErrorMessage 屬性設為 [請指出與會人數]。
從 [工具箱] 的 [驗證] 群組中,將 RangeValidator 控制項拖放到您剛加入的 RequiredFieldValidator 旁邊。
設定 RangeValidator 控制項的下列屬性:
屬性
設定
textNumberInParty
動態
輸入 1 和 20 之間的數字做為與會人數。
20
在這種情況下,是任意但較高的值。
1
在這個應用程式中,預定至少需要一個人。
輸入 1 和 20 之間的數字。
AllValidators
RangeValidator 控制項執行兩項功能:它確保使用者輸入的資料是數值,並檢查該數值是否在指定的最小值和最大值之間。
測試網頁
您現在可以測試目前所具有的驗證程式控制項。
若要測試基本驗證
按 CTRL+F5 執行頁面。
當網頁出現在瀏覽器中時,按一下 [Submit Request] 按鈕。
這時會顯示幾個驗證錯誤,因為您沒有填寫一些必要欄位。請注意,驗證錯誤會立即顯示,而網頁尚未送出。根據預設,驗證程式控制項會將用戶端 ECMAScript (JavaScript) 插入網頁,以在瀏覽器中執行驗證檢查。這樣可為使用者提供對驗證錯誤的立即回應;如果沒有用戶端指令碼,檢查驗證錯誤就需要來回存取伺服器,有時速度可能會很慢。實際上,在用戶端驗證檢查所有密碼之前,您無法提交網頁 (當網頁提交為安全性預防措施時,會再次執行相同的驗證檢查)。
輸入無效的電子郵件地址,以檢查 [textEmail] 文字方塊的驗證,然後使用有效的電子郵件地址 (例如您自己的地址) 再檢查一次。
檢查您只能在 [與會人數] 文字方塊中輸入 1 和 20 之間的數值。
輸入有效值之後,按一下 [送出要求] 按鈕。如果所有控制項的驗證都已通過,您將看到訊息 [已經處理您的預定]。
確認驗證正在如預期般執行後,關閉瀏覽器。
如果驗證並未如預期般執行,請檢查您已進行上述列出的所有屬性設定,然後再次執行網頁。
顯示錯誤資訊的其他方式
根據預設,驗證程式控制項會就地顯示錯誤文字;也就是說,它們會在網頁中控制項的位置上,顯示控制項之 Text 屬性的值。有時,您可能要以不同的方式顯示錯誤資訊。ASP.NET 驗證程式控制項為您提供下列額外選項:
在一個位置摘要所有的驗證錯誤。您可以這樣做以取代就地顯示錯誤,亦可並存。顯示錯誤摘要還可讓您顯示較長的錯誤訊息。
在瀏覽器中顯示具有錯誤資訊的快顯訊息。這個選項只在啟用指令碼的瀏覽器上使用。
您可以使用 ValidationSummary 控制項同時加入這兩個顯示選項。在逐步解說的這個部分中,您會將這兩個顯示功能加入網頁。
若要以其他方式顯示驗證資訊
從 [工具箱] 的 [驗證] 群組中,將 ValidationSummary 控制項拖曳至網頁上。
將 ValidationSummary 控制項的 ValidationGroup 屬性設為 AllValidators。
執行網頁。
執行您之前在逐步解說中所執行的相同測試。
對於每個錯誤,您都會在兩個位置看到錯誤資訊。簡短的錯誤訊息 (驗證程式的 Text 屬性值) 會顯示在驗證程式控制項所在的位置。較長的錯誤訊息 (控制項的 ErrorMessage 屬性值) 會顯示在 ValidationSummary 控制項中。
關閉瀏覽器。
將 ValidationSummary 控制項的 ShowMessageBox 屬性設定為 true。
執行網頁。
執行相同的測試。
這次,每個錯誤都會在瀏覽器中產生快顯訊息。
關閉瀏覽器。
加入自訂驗證以檢查日期輸入
ASP.NET 驗證控制項不包含自動檢查有效日期的控制項。不過,您可以使用 CustomValidator 控制項達到該目的。自訂驗證程式可讓您撰寫自己的驗證程式碼,以檢查應用程式所需的任何條件。在這個逐步解說中,您將使用 CustomValidator,檢查使用者在 textPreferredDate 文字方塊中輸入的值是否可以轉換為日期值。
您將加入兩個自訂驗證程式碼區塊。第一個是送出網頁時執行的自訂驗證程式碼。您必須永遠具有 CustomValidator 控制項的伺服器端驗證邏輯。您還將撰寫一些在瀏覽器中執行類似檢查的用戶端指令碼 (ECMAScript 或 JavaScript),以讓使用者獲得立即回應。
若要使用 CustomValidator 控制項檢查有效日期
從 [工具箱] 的 [驗證] 群組中,將 CustomValidator 控制項拖曳至網頁上,並將它置於 textPreferredDate 文字方塊旁邊。
設定 CustomValidator 控制項的下列屬性:
屬性
設定
textPreferredDate
動態
以 m/d/yyyy 的格式輸入日期。
無效的日期格式 (需為 m/d/yyyy)。
AllValidators
按兩下 CustomValidator 控制項,以建立其 ServerValidate 事件的處理常式,然後加入下列粗體顯示的程式碼:
Protected Sub CustomValidator1_ServerValidate( _ ByVal source As Object, _ ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Try DateTime.ParseExact(args.Value, "d", Nothing) args.IsValid = True Catch args.IsValid = False End Try End Sub
protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { try { DateTime.ParseExact(args.Value, "d", null); args.IsValid = true; } catch { args.IsValid = false; } }
此程式碼在使用者送出網頁時執行。程式碼使用傳遞給處理常式的 ServerValidateEventArgs (args) 物件與驗證程式控制項互動。使用者在 textPreferredDate 文字方塊中輸入的值會做為 args 物件的 Value 屬性傳遞。檢查使用者的輸入是否有效之後,將 args 物件的 IsValid 屬性設為 true 或 false。如果將其設為 false,則驗證程式會顯示其錯誤訊息。
在這個範例中,程式碼會使用 try-catch 區塊,以判斷使用者的輸入是否可以轉換為 DateTime 物件。如果使用者輸入無效的值 (不符合 m/d/yyyy 日期格式的任何值),則 DateTime 物件的 ParseExact 方法會擲回例外狀況,並執行 Catch 區塊。
在 Button_Click 處理常式中,加入下列粗體顯示的程式碼:
Protected Sub buttonSubmit_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If Page.IsValid Then labelMessage.Text = "Your reservation has been processed." else labelMessage.Text = "Page is not valid."End If End Sub
protected void buttonSubmit_Click(object sender, EventArgs e) { if(Page.IsValid) { labelMessage.Text = "Your reservation has been processed."; } else labelMessage.Text = "Page is not valid." } }
使用 CustomValidator 控制項時,您必須檢查任何伺服器端處理中的 Page.IsValid 屬性,以確保所有的驗證檢查都已通過。IsValid 屬性會傳回網頁上所有驗證程式控制項的累計狀態。這個屬性用於確保所有的驗證檢查都已通過任何伺服器端處理。
您現在已加入 CustomValidator 控制項的伺服器端程式碼,以檢查有效日期。如同您之前從逐步解說中所了解的那樣,驗證程式控制項還會使用用戶端指令碼檢查使用者的輸入。您也可將用戶端指令碼加入 CustomValidator 控制項。實際上,您撰寫的用戶端指令碼會重複伺服器端驗證所執行的邏輯。撰寫用戶端自訂驗證程式碼並不一定可行 (例如,如果自訂程式碼藉由查詢伺服器端資料庫來驗證使用者的輸入)。不過,在這種情況下,您可以建立用戶端程式碼,該程式碼執行的檢查與伺服器端程式碼執行的檢查基本上相同。
若要加入用戶端指令碼至 CustomValidator 控制項
開啟或切換至 Default.aspx。
在網頁的 <head> 項目中,加入下列用戶端指令碼區塊:
<script language="javascript"> function validateDate(oSrc, args) { var iDay, iMonth, iYear; var arrValues; arrValues = args.Value.split("/"); iMonth = arrValues[0]; iDay = arrValues[1]; iYear = arrValues[2]; var testDate = new Date(iYear, iMonth - 1, iDay); if ((testDate.getDate() != iDay) || (testDate.getMonth() != iMonth - 1) || (testDate.getFullYear() != iYear)) { args.IsValid = false; return; } return true; }</script>
注意事項:
ECMAScript (JavaScript) 區分大小寫,您輸入的程式碼應與在此處看到的程式碼完全相同。
此程式碼類似於伺服器端驗證檢查,但不是完全相同。將使用者的輸入傳遞給函式,做為 args 物件的 Value 屬性,而且您可以設定物件的 IsValid 屬性,以指出該值是否通過驗證。在這個範例中,程式碼會檢查輸入的內容,以確保是有效的數值日期。
請注意,用戶端指令碼中自訂驗證的程式碼與伺服器程式碼中的稍有不同。ECMAScript 提供的功能與 .NET Framework 中的功能並不完全相同。因此,ECMAScript 會剖析輸入的文字,而不是您在伺服器上用於檢查日期的 DateTime.ParseExact 程式碼。不過,兩個驗證檢查 (用戶端和伺服器) 很相似,足夠提供您需要的功能。
將插入點置於 <asp:customvalidator> 項目中以選取它。
在 [屬性] 視窗中,將控制項的 ClientValidationFunction 屬性設為 validateDate,即是您剛才建立之 ECMAScript 函式的名稱。
您現在已加入自訂驗證檢查,它用在用戶端指令碼中以立即檢查使用者的輸入,還會在將網頁送出至伺服器時重新執行檢查。
測試自訂驗證
您現在可以測試自訂驗證是否正確運作。
若要測試自訂驗證
藉由將 CustomValidator 控制項的 EnableClientScript 屬性設為 false,可以暫時停用用戶端驗證。
按 CTRL+F5 執行頁面。
填寫電子郵件地址和與會人數,以讓這些欄位的驗證都通過。
在日期文字方塊中,輸入明顯不是日期的字串,然後按一下 [Submit Request] 按鈕。
您的網頁會執行來回存取 Web 伺服器,其中伺服器端的驗證會失敗。IsValid 的測試失敗,且 labelMessage 會顯示「網頁無效」。
填寫有效的日期值 (例如,11/17/2005),並按一下按鈕。
這次,該日期值會通過驗證,所以您會看到在按鈕的 Click 處理常式中建立的確認訊息。
關閉瀏覽器。
藉由將 CustomValidator 控制項的 EnableClientScript 屬性重新設為 true,可以重新啟用用戶端驗證。
重新執行網頁,並為電子郵件地址和與會人數輸入有效的值。
將無效的日期值輸入日期文字方塊中,然後按下 TAB 鍵 (請勿按一下按鈕)。
日期文字方塊剛一遺失焦點,用戶端驗證指令碼就會執行,您便會看到錯誤訊息。
注意事項:
如果您正在使用 Internet Explorer 中的自動完成選項,則從自動完成清單選取值會將值填入到文字方塊中,但用戶端驗證程式不會執行。
按一下 [Submit Request] 按鈕。
因為日期文字方塊的用戶端驗證已失敗,所以不會送出網頁。
更正日期值並再按一次 TAB 鍵。
錯誤訊息就會消失。您現在可以送出表單。
加入使用條件式驗證的選擇性控制項
在逐步解說的最後部分中,您會將一些選擇性資訊加入預定表單。使用者可以核取方塊,以表示他們想要透過電話確認預定。如果已核取方塊,則他們必須輸入電話號碼。因此網頁會包含兩個額外控制項:核取方塊和文字方塊。
如同之前一樣,您將使用驗證檢查使用者的輸入。您將使用 RequiredFieldValidator 控制項確保使用者輸入電話號碼,並使用 RegularExpressionValidator 控制項檢查其格式。電話號碼是選擇項;只有在使用者已選取 Confirm reservation by phone 核取方塊時,您才需要檢查電話號碼。因此您還要撰寫一些簡單的程式碼,以根據核取方塊的狀態開啟或關閉電話號碼的驗證。
若要加入條件式驗證
從 [工具箱] 的 [標準] 群組中,將 CheckBox 控制項拖曳至網頁,並設定下列屬性:
屬性
設定
checkPhoneConfirmation
True
當使用者按一下核取方塊時,網頁將執行來回存取,並條件式地啟用文字方塊及其驗證。
False
按一下 CheckBox 不會自動進行驗證。
透過電話確認預定。
將 TextBox 控制項拖曳至網頁上 CheckBox 控制項之下,並設定下列屬性:
屬性
設定
textPhoneNumber
False
直到使用者按一下核取方塊之後,才會啟用文字方塊。
在電話號碼文字方塊旁邊輸入文字做為標題,例如 [電話號碼:]。
從 [工具箱] 的 [驗證] 群組中,將 RequiredFieldValidator 拖曳至網頁,並設定下列屬性:
屬性
設定
validatorRequiredPhoneNumber
您之前在逐步解說中並未設定驗證程式控制項的 ID,但是在這種情況下,您將在程式碼中參考驗證程式控制項,所以使用助憶鍵 (Mnemonics) ID 會很有幫助。
textPhoneNumber
動態
您必須提供電話號碼。
*
(保留空白)
如果這個屬性是空白的,則驗證程式不屬於您為網頁上其他驗證程式控制項所建立的 AllValidators 群組。因此,按一下 [buttonSubmit] 控制項時,預設不會檢查這個驗證程式。
將 RegularExpressionValidator 控制項拖曳至網頁,並設定下列屬性:
屬性
設定
validatorRegExPhoneNumber
textPhoneNumber
動態
電話號碼的格式無效
無效的格式
(使用 [規則運算式編輯器] 對話方塊,以選取美國電話號碼或其他電話號碼運算式)。
(保留空白)
按兩下 checkPhoneConfirmation 控制項,以建立其 CheckedChanged 事件的處理常式,然後加入下列粗體顯示的程式碼:
Protected Sub checkPhoneConfirmation_CheckedChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) If checkPhoneConfirmation.Checked = True Then textPhoneNumber.Enabled = True validatorRequiredPhoneNumber.ValidationGroup = "AllValidators" validatorRegExPhoneNumber.ValidationGroup = "AllValidators" Else textPhoneNumber.Enabled = False validatorRequiredPhoneNumber.ValidationGroup = "" validatorRegExPhoneNumber.ValidationGroup = "" End If End Sub
protected void checkPhoneConfirmation_CheckedChanged( object sender, EventArgs e) { if(checkPhoneConfirmation.Checked) { textPhoneNumber.Enabled = true; validatorRequiredPhoneNumber.ValidationGroup = "AllValidators"; validatorRegExPhoneNumber.ValidationGroup = "AllValidators"; } else { textPhoneNumber.Enabled = false; validatorRequiredPhoneNumber.ValidationGroup = ""; validatorRegExPhoneNumber.ValidationGroup = ""; } }
當使用者按一下核取方塊時,會將與文字方塊關聯的兩個驗證程式加入其他驗證程式控制項所屬的驗證群組。結果是,當使用者送出網頁時,會檢查網頁上的所有驗證程式,包括電話號碼的驗證程式。如果使用者清除核取方塊,則會將驗證程式從群組移除,按一下 [送出要求] 按鈕時也不會處理該驗證程式。
測試條件式驗證
您現在可以測試條件式驗證是否正確運作。
若要測試條件式驗證
按 CTRL+F5 執行頁面。
輸入電子郵件地址、與會人數和日期的有效資訊。
按一下 [送出要求]。
網頁已送出,並且您會看到確認訊息。
選取 [透過電話確認預定] 核取方塊。
再次按一下 [送出要求]。
這次,您會看到錯誤訊息 (電話文字方塊旁邊的星號)。當您按一下核取方塊時,便已啟動文字方塊的驗證。
輸入無效的電話號碼,然後再按一下 [Submit Request],以確認文字方塊不會接受無效的電話號碼。
輸入格式正確的電話號碼並按一下送出按鈕,以確認驗證程式控制項會接受語式正確 (Well-Formed) 的資料。
後續步驟
您加入 Web Form 網頁中的驗證說明了 Web 驗證控制項的基本概念。
驗證的一個重要方面是了解其如何幫助您提升網站的安全性。如需詳細資訊,請參閱 Web 應用程式安全性威脅概觀。