1 / 55

Ch07 表單欄位驗證控制項

Ch07 表單欄位驗證控制項. 網頁程式設計. 大綱. 表單送回功能（ Postback） ASP.NET 的表單欄位驗證 RequiredFiledValidator 驗證控制項 CompareValidator 驗證控制項 RangeValidator 驗證控制項 RegularExpressionValidator 驗證控制項 CustomValidator 驗證控制項 ValidationSummary 驗證控制項. 表單送回功能（ Postback）.

kadeem-emerson
Download Presentation

Ch07 表單欄位驗證控制項

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ch07 表單欄位驗證控制項 網頁程式設計

  2. 大綱 • 表單送回功能（Postback） • ASP.NET的表單欄位驗證 • RequiredFiledValidator驗證控制項 • CompareValidator驗證控制項 • RangeValidator驗證控制項 • RegularExpressionValidator驗證控制項 • CustomValidator驗證控制項 • ValidationSummary驗證控制項

  3. 表單送回功能（Postback） • ASP.NET應用程式是使用Web表單控制項讓使用者輸入或選取資料，輸入的資料在客戶端是以表單送回功能，將資料送回伺服端來進行處理，預設是送到本身的ASP.NET程式，其相關屬性如下所示： • Page物件的IsPostBack屬性：檢查是否是第一次載入ASP.NET程式，或是已經在客戶端執行過送回。 • 伺服端控制項的AutoPostBack屬性：如果控制項指定AutoPostBack屬性為True，當控制項的資料變更時，就會自動執行客戶端送回的功能。

  4. Web表單的IsPostBack屬性 • 在Page_Load事件處理程序可以使用Page物件的IsPostBack屬性檢查表單是否已經送回資料，如下所示： If Page.IsPostBack Then If name.Text <> "" Then show.Text = name.Text & "歡迎進入網頁!" End If Else name.Text = "陳會安" labelName.Text = "輸入姓名: " End If

  5. 控制項的AutoPostBack屬性-說明 • Web表單控制項如果擁有AutoPostBack屬性，就可以自動送回控制項內容的變更，例如：DropDownList控制項，如下所示： <asp:DropDownList id="Username" Width="100px" AutoPostBack="True" OnSelectedIndexChanged="Change_Name" runat="Server"> <asp:ListItem Text="陳會安" Value="001"/> <asp:ListItem Text="江小魚" Value="002"/> <asp:ListItem Text="陳大安" Value="003"/> </asp:DropDownList>

  6. 控制項的AutoPostBack屬性-控制項 • Web控制項支援AutoPostBack屬性和其觸發的事件，如下表所示：

  7. <%@ Page Language="VB" %> <html> <head> <title> Web表單的IsPostBack屬性</title> <script language="VB" runat="server"> Sub Page_Load(S as Object, E as EventArgs) If Page.IsPostBack Then If name.Text <> "" Then show.Text = name.Text & "歡迎進入網頁!" End If Else name.Text = "" lblName.Text = "輸入姓名: " End If End Sub </script> </head> <body> <h2> Web表單的IsPostBack屬性</h2><hr> <form runat="Server"> <asp:Label id="lblName" runat="Server“/> <asp:Textbox id="name" runat="Server"/> <asp:button text="送出" runat="Server"/> </form> <asp:Label id="show" runat="server" /> </body> </html> 範例1:IsPostBack與AutoPostBack的比較

  8. <%@ Page Language="VB" %> <html> <head> <title>控制項的AutoPostBack屬性</title> <script language="VB" runat="server"> Sub Page_Load(S as Object, E as EventArgs) If Page.IsPostBack Then If name.Text <> "" Then show.Text = name.Text & "歡迎進入網頁!" End If Else name.Text = "" lblName.Text = "輸入姓名: " End If End Sub Sub Change_Name(S as Object, E as EventArgs) show.Text = name.Text & "你好!" End Sub </script> </head> <body> <h2>控制項的AutoPostBack屬性</h2><hr> <form runat="Server"> <asp:Label id="lblName" runat="Server"/> <asp:Textbox id="name" runat="Server" AutoPostBack="True" OnTextChanged="Change_Name"/> <asp:button text="送出" runat="Server"/> </form> <asp:Label id="show" runat="server" /> </body> </html> 範例1:IsPostBack與AutoPostBack的比較

  9. ASP.NET的表單欄位驗證-說明 • Web表單是ASP.NET應用程式的輸入介面，不過使用者在輸入資料時常常粗心大意，程式設計者並不能期望填寫的資料一定正確，相反的，應該假設使用者都會出錯，所以需要使用表單欄位驗證，檢查使用者輸入的資料。

  10. ASP.NET的表單欄位驗證-種類

  11. ASP.NET的表單欄位驗證-使用 • 如果Web表單擁有上表的欄位驗證控制項，就可以檢查Page物件的IsValid屬性，以確認表單是否通過驗證，如下所示： If Page.IsValid Then ……… End If • If條例的程式碼在確認IsValid屬性為True，表示通過驗證，接著才可以執行Web表單的處理。

  12. RequiredFieldValidator驗證控制項-使用 • RequiredFieldValidator驗證控制項可以檢查指定控制項是否忘了輸入資料或沒有選取選項，如下所示： <asp:RequiredFieldValidator id="validName" ControlToValidate="name" ErrorMessage="必須輸入使用者名稱!" runat="Server"/>

  13. RequiredFieldValidator驗證控制項-屬性

  14. RequiredFieldValidator驗證控制項-InitialValue屬性 • InitialValue屬性是用來指定驗證欄位不能輸入的值，如下所示： <asp:RequiredFieldValidator id="validPass" ControlToValidate="pass" InitialValue="1234" ErrorMessage="必須輸入使用者密碼!" runat="Server"/> • 驗證控制項要求TextBox控制項pass的值不可以是【1234】，可以是空白。

  15. 範例2:使用RequiredFieldValidator控制項測試是否有輸入值範例2:使用RequiredFieldValidator控制項測試是否有輸入值 • <Html> • <head> • <title>RequiredFieldValidator控制項</title> • <Script Language="VB" Runat="Server"> • Sub Button1_Click(Sender As Object, e As EventArgs) • If Page.IsValid Then • Table1.Visible="False" • Label1.Text="恭喜您註冊成功<Br>" • Label5.Text="您的帳號是：" & TextBox1.Text • Label5.Text+="<Br>您的密碼是：" & TextBox2.Text • If TextBox3.Text="" Then • Label5.Text+="<Br>您未填寫註冊的E-Mail" • Else • Label5.Text+="<Br>您的註冊的E-Mail是：" & TextBox3.Text • End If • Else • Label5.Text="AAA" • End If • End Sub • </Script> • </head>

  16. 範例2:使用RequiredFieldValidator控制項測試是否有輸入值(續)範例2:使用RequiredFieldValidator控制項測試是否有輸入值(續) • <Body> • <ASP:Label Id="Label1" Runat="Server" Font-Size="14" • ForeColor="Blue" Text="請輸入下列註冊資料"/> • <Form Runat="Server"> • <ASP:Table Id="Table1" Runat="Server"> • <ASP:TableRow Id="Row1" Runat="Server"> • <ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label2" Runat="Server" Text="帳號："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell2" Runat="Server"> • <ASP:TextBox Id="TextBox1" Runat="Server"/> • <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" • ControlToValidate="TextBox1" Text="必須要有資料" ForeColor="Red"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row2" Runat="Server"> • <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label3" Runat="Server" Text="密碼："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell4" Runat="Server"> • <ASP:TextBox Id="TextBox2" Runat="Server" TextMode="Password"/> • <ASP:RequiredFieldValidator Id="Validator2" Runat="Server" • ControlToValidate="TextBox2" Text="必須要有資料" ForeColor="Red"/> • </ASP:TableCell> • </ASP:TableRow>

  17. 範例2:使用RequiredFieldValidator控制項測試是否有輸入值(續)範例2:使用RequiredFieldValidator控制項測試是否有輸入值(續) • <ASP:TableRow Id="Row3" Runat="Server"> • <ASP:TableCell Id="Cell5" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label4" Runat="Server" Text="E-Mail："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell6" Runat="Server"> • <ASP:TextBox Id="TextBox3" Runat="Server"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row4" Runat="Server"> • <ASP:TableCell Id="Cell7" Runat="Server" Colspan="2"> • <ASP:Button Id="Button1" Runat="Server" Text="送出註冊" OnClick="Button1_Click"/><P> • </ASP:TableCell> • </ASP:TableRow> • </ASP:Table> • </Form> • <ASP:Label Id="Label5" Runat="Server"/> • </Body> • </Html>

  18. CompareValidator驗證控制項-使用 • CompareValidator驗證控制項是用來比較2個控制項的值，或是與指定常數值進行比較，如下所示： <asp:CompareValidator id="validComp" ControlToValidate="pass" ControlToCompare = "pass1“ Operator=“比較運算子” Type="String" Display="Dynamic" ErrorMessage="兩次輸入的密碼不同!" runat="Server"/>

  19. CompareValidator驗證控制項-屬性

  20. CompareValidator驗證控制項-Operator屬性的比較運算子CompareValidator驗證控制項-Operator屬性的比較運算子

  21. 範例3: 測試新舊密碼(CompareValidator控制項中的ControlToCompare) • <Html> • <head> • <title>CompareValidator控制項中的ControlToCompare</title> • <Script Language="VB" Runat="Server"> • Sub Button1_Click(Sender As Object, e As EventArgs) • If Page.IsValid Then • Label1.Text="密碼更改成功！！" • End If • End Sub • </Script> • </head>

  22. 範例3: 測試新舊密碼(CompareValidator控制項中的ControlToCompare) • <Body> • <Form Runat="Server"> • <ASP:Table Id="Table1" Runat="Server"> • <ASP:TableRow Id="Row1" Runat="Server"> • <ASP:TableCell Id="Cell1" Runat="Server" ColumnSpan="2" HorizontalAlign="Center"> • <ASP:Label Id="Label1" Runat="Server" Text="更 改 密 碼" • ForeColor="Blue" Font-Size="14"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row3" Runat="Server"> • <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label3" Runat="Server" Text="新密碼："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell5" Runat="Server"> • <ASP:TextBox Id="TextBox2" Runat="Server"/> • </ASP:TableCell> • </ASP:TableRow>

  23. 範例3: 測試新舊密碼(CompareValidator控制項中的ControlToCompare) • <ASP:TableRow Id="Row4" Runat="Server"> • <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label4" Runat="Server" Text="確認新密碼："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell7" Runat="Server"> • <ASP:TextBox Id="TextBox3" Runat="Server"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row5" Runat="Server"> • <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Center"> • <ASP:Button Id="Button1" Runat="Server" Text="更改密碼" • OnClick="Button1_Click"/> • </ASP:TableCell> • <ASP:TableCell Id="Cell9" Runat="Server"> • <asp:CompareValidator id="Comp1" runat="server" • ControlToValidate="TextBox3" • ControlToCompare="TextBox2" • Type="String" Operator="Equal" • Text="* 新密碼不符合"/> • </asp:CompareValidator> • </ASP:TableCell> • </ASP:TableRow> • </ASP:Table> • </Form>

  24. 範例4: 新增行事曆(行事曆的日期必須在今天以後的日子) • <Html> • <head> • <title>新增在今天之後的行事曆</title> • <Script Language="VB" Runat="Server"> • Sub Page_Load(Sender As Object, e As EventArgs) • Validator2.ValueToCompare=DateTime.Today() • End Sub • Sub Button1_Click(Sender As Object, e As EventArgs) • If Page.IsValid Then • Table1.Visible="False" • Label1.Text="新增行事曆內容成功<Br>" • Label4.Text="時間：" & TextBox1.Text • Label4.Text+="<Br>內容：" & Replace(TextBox2.Text,Chr(13),"<Br>") • End If • End Sub • </Script> • </head>

  25. 範例4: 新增行事曆(行事曆的日期必須在今天以後的日子) • <Body> • <ASP:Label Id="Label1" Runat="Server" Font-Size="14" • ForeColor="Blue" Text="新增行事曆內容"/> • <Form Runat="Server"> • <ASP:Table Id="Table1" Runat="Server"> • <ASP:TableRow Id="Row1" Runat="Server"> • <ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label2" Runat="Server" Text="日期："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell2" Runat="Server"> • <ASP:TextBox Id="TextBox1" Runat="Server" Text="輸入格式：yyyy/mm/dd"/> • <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" • ControlToValidate="TextBox1" Text="必須要有資料" ForeColor="Red"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row2" Runat="Server"> • <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label3" Runat="Server" Text="內容："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell4" Runat="Server"> • <ASP:TextBox Id="TextBox2" Runat="Server" TextMode="MultiLine" Rows="4"/> • </ASP:TableCell> • </ASP:TableRow>

  26. 範例4: 新增行事曆(行事曆的日期必須在今天以後的日子) • <ASP:TableRow Id="Row3" Runat="Server"> • <ASP:TableCell Id="Cell5" Runat="Server" Colspan="2"> • <ASP:Button Id="Button1" Runat="Server" Text="新增內容" OnClick="Button1_Click"/><P> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row4" Runat="Server"> • <ASP:TableCell Id="Cell6" Runat="Server" Colspan="2"> • <ASP:CompareValidator Id="Validator2" Runat="Server" • ControlToValidate="TextBox1" • Operator="GreaterThanEqual" • Type=“Date" Text="請輸入今天以後的日期(含今天)"/> • </ASP:TableCell> • </ASP:TableRow> • </ASP:Table> • </Form> • <ASP:Label Id="Label4" Runat="Server"/> • </Body> • </Html>

  27. RangeValidator驗證控制項-使用 • RangeValidator驗證控制項可以檢查控制項的值是否在指定的範圍內，如下所示： <asp:RangeValidator id="validRange" ControlToValidate="age" Display="Dynamic" Type="Integer" MinimumValue="21" MaximumValue="70" ErrorMessage="年齡的範圍是21 ~ 70!" runat="server"/>

  28. RangeValidator驗證控制項-屬性

  29. 範例5: 輸入成績(使用RangeValidator控制項) • <Html> • <head> • <title>成績輸入(使用RangeValidator控制輸入範圍在0~100間)</title> • <Script Language="VB" Runat="Server"> • Sub Button1_Click(Sender As Object, e As EventArgs) • If Page.IsValid Then • IF TextBox1.Text > 60 Then • Label2.Text="您的分數是：" & TextBox1.Text • Label2.Text+="，恭喜您過關了！" • Else • Label2.ForeColor=System.Drawing.Color.Red • Label2.Text="您的分數是：" & TextBox1.Text • Label2.Text+="要再加油囉！！" • End If • End If • End Sub • </Script> • </head>

  30. 範例5: 輸入成績(使用RangeValidator控制項) • <Body> • <Form Runat="Server"> • <ASP:Table Id="Table1" Runat="Server" • BorderColor="LightBlue" BorderWidth="3"> • <ASP:TableRow Id="Row1" Runat="Server"> • <ASP:TableCell Id="Cell1" Runat="Server"> • <ASP:Label Id="Label1" Runat="Server" Text="請輸入成績："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell2" Runat="Server"> • <ASP:TextBox Id="TextBox1" Runat="Server"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row2" Runat="Server"> • <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Center"> • <ASP:Button Id="Button1" Runat="Server" Text="確定" • OnClick="Button1_Click"/> • </ASP:TableCell> • <ASP:TableCell Id="Cell4" Runat="Server"> • <ASP:RangeValidator Id="Comp1" Runat="Server" • ControlToValidate="TextBox1" • MinimumValue="0" • MaximumValue="100" • Type="Integer" • Text="請輸入0~100之間的數字"/> • </ASP:TableCell> • </ASP:TableRow> • </ASP:Table> • </Form> • <ASP:Label Id="Label2" Runat="Server"/> • </Body> • </Html> 輸入的值只可以是整數,所以70.5是 不合法的,如果要讓70.5合法,必須 設定Type=“Double”

  31. RegularExpressionValidator驗證控制項-正規運算式 • 「正規運算式」（Regular Expression）是一個範本字串，能夠進行字串的比對，例如：檢查使用者名稱、電子郵件地址等字串格式是否符合需求。 • 在正規運算式的範本字串中，每一個字元都有特殊意義，屬於一種小型的字串比對語言，正規運算式直譯程式或稱引擎能夠將定義的正規運算式和字串變數進行比較，引擎傳回布林值，True表示字串符合範本字串的定義，False表示不符合。

  32. RegularExpressionValidator驗證控制項-字元與字元集1RegularExpressionValidator驗證控制項-字元與字元集1

  33. RegularExpressionValidator驗證控制項-字元與字元集2RegularExpressionValidator驗證控制項-字元與字元集2

  34. RegularExpressionValidator驗證控制項-字元與字元集3RegularExpressionValidator驗證控制項-字元與字元集3

  35. RegularExpressionValidator驗證控制項-正規運算式範例RegularExpressionValidator驗證控制項-正規運算式範例

  36. RegularExpressionValidator驗證控制項-使用 • 在Web表單的RegularExpressionValidator驗證控制項可以指定使用正規運算式的範本字串來進行資料驗證，如下所示： <asp:RegularExpressionValidator id="ValidRegxEmail" ControlToValidate="email" Display="Static" ValidationExpression="[\w\.]+@[\w\.]*" ErrorMessage="郵件地址的格式錯誤" runat="Server"/>

  37. RegularExpressionValidator驗證控制項-屬性

  38. 範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator)範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) • <Html> • <head> • <title>驗證身份證字號、電話、電子郵件(RegularExpressionValidator)</title> • <Script Language="VB" Runat="Server"> • Sub Button1_Click(Sender As Object, e As EventArgs) • If Page.IsValid Then • Label1.Text="驗証成功" • End If • End Sub • </Script> • </head>

  39. 範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator)範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) • <Body> • <Form Runat="Server"> • <ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue"> • <ASP:TableRow Id="Row1" Runat="Server"> • <ASP:TableCell Id="Cell1" Runat="Server" • ColumnSpan="2" HorizontalAlign="Center"> • <ASP:Label Id="Label1" Runat="Server" ForeColor="Blue" • Text="請填寫下列的資料"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row2" Runat="Server"> • <ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label2" Runat="Server" Text="姓名："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell3" Runat="Server"> • <ASP:TextBox Id="TextBox1" Runat="Server"/> • <ASP:RequiredFieldValidator Id="Comp1" Runat="Server" • ControlToValidate="TextBox1" • Text="不能空白"/> • </ASP:TableCell> • </ASP:TableRow>

  40. 範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator)範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) • <ASP:TableRow Id="Row3" Runat="Server"> • <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label3" Runat="Server" Text="身份證字號："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell5" Runat="Server"> • <ASP:TextBox Id="TextBox2" Runat="Server"/> • <ASP:RequiredFieldValidator Id="Comp2" Runat="Server" • ControlToValidate="TextBox2" • Text="不能空白"/> • <ASP:RegularExpressionValidator Id="Comp3" Runat="Server" • ControlToValidate="TextBox2" • ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}" • ErrorMessage="身份證字號錯誤!"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row4" Runat="Server"> • <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label5" Runat="Server" Text="行動電話："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell7" Runat="Server"> • <ASP:TextBox Id="TextBox3" Runat="Server"/> • <ASP:RegularExpressionValidator Id="Comp4" Runat="Server" • ControlToValidate="TextBox3" • ValidationExpression="[0-9]{4}-[0-9]{6}" • Text="格式錯誤"/> • <ASP:RequiredFieldValidator Id="Comp5" Runat="Server" • ControlToValidate="TextBox3" • Text="不能空白"/> • </ASP:TableCell> • </ASP:TableRow>

  41. 範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator)範例6:驗證身份證字號、電話、電子郵件(RegularExpressionValidator) • <ASP:TableRow Id="Row5" Runat="Server"> • <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label6" Runat="Server" Text="電子郵件："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell9" Runat="Server"> • <ASP:TextBox Id="TextBox4" Runat="Server"/> • <ASP:RegularExpressionValidator Id="Comp6" Runat="Server" • ControlToValidate="TextBox4" • ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+" • Text="格式錯誤"/> • <ASP:RequiredFieldValidator Id="Comp7" Runat="Server" • ControlToValidate="TextBox4" • Text="不能空白"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row6" Runat="Server"> • <ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right"> • <ASP:Button Id="Button1" Runat="Server" Text="確 定" • OnClick="Button1_Click"/> • </ASP:TableCell> • </ASP:TableRow> • </ASP:Table> • </Form> • </Body> • </Html>

  42. CustomValidator驗證控制項-使用 • CurstomValidator驗證控制項可以使用自行撰寫的程序來驗證控制項的值，如下所示： <asp:CustomValidator id="validCustom" ControlToValidate="name" Display="Dynamic" OnServerValidate="Check_UserName" ErrorMessage="使用者稱格式錯誤!" runat="Server"/>

  43. CustomValidator驗證控制項-屬性與事件 • 當OnServerValidator事件觸發後，事件處理程序，如下： Sub Check_UserName(Sender As Object, e As ServerValidateEventArgs) If IsNumeric(e.Value) Then e.IsValid = False Else e.IsValid = True End If End Sub

  44. ValidationSummary驗證控制項-使用 • ValidationSummary驗證控制項是用來顯示各驗證錯誤的摘要資訊，也就是將所有驗證錯誤訊息使用摘要方式來顯示，如下所示： <asp:ValidationSummary ID="validSummary" HeaderText="Web表單欄位的錯誤資料: " DisplayMode="BulletList“ ShowSummary=“True或False” ShowMessageBox=“True或False” runat="Server"/>

  45. ValidationSummary驗證控制項-屬性

  46. 範例7:顯示那些控制項未通過驗證 • <Html> • <head> • <title>驗證身份證字號、電話、電子郵件(ValidationSummary控制項)</title> • <Script Language="VB" Runat="Server"> • Sub Button1_Click(Sender As Object, e As EventArgs) • If Page.IsValid Then • Label1.Text="驗証成功" • End If • End Sub • </Script> • </head>

  47. 範例7:顯示那些控制項未通過驗證 • <Body> • <Form Runat="Server"> • <ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue"> • <ASP:TableRow Id="Row1" Runat="Server"> • <ASP:TableCell Id="Cell1" Runat="Server" • ColumnSpan="2" HorizontalAlign="Center"> • <ASP:Label Id="Label1" Runat="Server" ForeColor="Blue" • Text="請填寫下列的資料"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row2" Runat="Server"> • <ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label2" Runat="Server" Text="姓名："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell3" Runat="Server"> • <ASP:TextBox Id="TextBox1" Runat="Server"/> • <ASP:RequiredFieldValidator Id="Comp1" Runat="Server" • ControlToValidate="TextBox1" • Text="*" • ErrorMessage="姓名不能空白"/> • </ASP:TableCell> • </ASP:TableRow>

  48. 範例7:顯示那些控制項未通過驗證 • <ASP:TableRow Id="Row3" Runat="Server"> • <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label3" Runat="Server" Text="身份證字號："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell5" Runat="Server"> • <ASP:TextBox Id="TextBox2" Runat="Server"/> • <ASP:RequiredFieldValidator Id="Comp2" Runat="Server" • ControlToValidate="TextBox2" • Text="*" • ErrorMessage="身份證字號不能空白"/> • <ASP:RegularExpressionValidator Id="Comp3" Runat="Server" • ControlToValidate="TextBox2" • ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}" • Text="*" • ErrorMessage="身份證字號錯誤!"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row4" Runat="Server"> • <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label5" Runat="Server" Text="行動電話："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell7" Runat="Server"> • <ASP:TextBox Id="TextBox3" Runat="Server"/> • <ASP:RegularExpressionValidator Id="Comp4" Runat="Server" • ControlToValidate="TextBox3" • ValidationExpression="[0-9]{4}-[0-9]{6}" • Text="*" • ErrorMessage="行動電話格式錯誤XXXX-XXXXXX"/> • <ASP:RequiredFieldValidator Id="Comp5" Runat="Server" • ControlToValidate="TextBox3" • Text="*" • ErrorMessage="行動電話不能空白"/> • </ASP:TableCell> • </ASP:TableRow>

  49. 範例7:顯示那些控制項未通過驗證 • <ASP:TableRow Id="Row5" Runat="Server"> • <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right"> • <ASP:Label Id="Label6" Runat="Server" Text="電子郵件："/> • </ASP:TableCell> • <ASP:TableCell Id="Cell9" Runat="Server"> • <ASP:TextBox Id="TextBox4" Runat="Server"/> • <ASP:RegularExpressionValidator Id="Comp6" Runat="Server" • ControlToValidate="TextBox4" • ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+" • Text="*" • ErrorMessage="電子郵件格式錯誤"/> • <ASP:RequiredFieldValidator Id="Comp7" Runat="Server" • ControlToValidate="TextBox4" • Text="*" • ErrorMessage="電子郵件不能空白"/> • </ASP:TableCell> • </ASP:TableRow> • <ASP:TableRow Id="Row6" Runat="Server"> • <ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right"> • <ASP:Button Id="Button1" Runat="Server" Text="確 定" • OnClick="Button1_Click"/> • </ASP:TableCell> • </ASP:TableRow>

  50. 範例7:顯示那些控制項未通過驗證 • <ASP:TableRow Id="Row7" Runat="Server"> • <ASP:TableCell Id="Cell11" Runat="Server" ColumnSpan="2"> • <ASP:ValidationSummary Id="Comp8" Runat="Server" • HeaderText="* 欄位發生以下的錯誤:"/> • </ASP:TableCell> • </ASP:TableRow> • </ASP:Table> • </Form> • </Body> • </Html>

More Related