ch07 表單欄位驗證控制項

55
Ch07 Ch07 表表表表表表表表表 表表表表表表表表表 表表表表表表 表表表表表表

Upload: kadeem-emerson

Post on 02-Jan-2016

44 views

Category:

Documents


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Ch07  表單欄位驗證控制項

Ch07 Ch07 表單欄位驗證控制表單欄位驗證控制項項

網頁程式設計網頁程式設計

Page 2: Ch07  表單欄位驗證控制項

22

大綱大綱 表單送回功能(表單送回功能( PostbackPostback)) ASP.NETASP.NET 的表單欄位驗證的表單欄位驗證 RequiredFiledValidatorRequiredFiledValidator 驗證控制項驗證控制項 CompareValidatorCompareValidator 驗證控制項驗證控制項 RangeValidatorRangeValidator 驗證控制項驗證控制項 RegularExpressionValidatorRegularExpressionValidator 驗證控制項驗證控制項 CustomValidatorCustomValidator 驗證控制項驗證控制項 ValidationSummaryValidationSummary 驗證控制項驗證控制項

Page 3: Ch07  表單欄位驗證控制項

33

表單送回功能(表單送回功能( PostbackPostback)) ASP.NETASP.NET 應用程式是使用應用程式是使用 WebWeb 表單控制項讓使表單控制項讓使

用者輸入或選取資料,輸入的資料在客戶端是以用者輸入或選取資料,輸入的資料在客戶端是以表單送回功能,將資料送回伺服端來進行處理,表單送回功能,將資料送回伺服端來進行處理,預設是送到本身的預設是送到本身的 ASP.NETASP.NET 程式,其相關屬性程式,其相關屬性如下所示:如下所示: PagePage物件的物件的 IsPostBackIsPostBack屬性屬性::檢查是否是第一次載檢查是否是第一次載入入 ASP.NETASP.NET 程式,或是已經在客戶端執行過送回。程式,或是已經在客戶端執行過送回。

伺服端控制項的伺服端控制項的 AutoPostBackAutoPostBack屬性屬性::如果控制項指如果控制項指定定 AutoPostBackAutoPostBack 屬性為屬性為 TrueTrue ,,當控制項的資料變更當控制項的資料變更時,就會自動執行客戶端送回的功能。時,就會自動執行客戶端送回的功能。

Page 4: Ch07  表單欄位驗證控制項

44

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

Page 5: Ch07  表單欄位驗證控制項

55

控制項的控制項的 AutoPostBackAutoPostBack 屬性屬性 -- 說說明明

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

Page 6: Ch07  表單欄位驗證控制項

66

控制項的控制項的 AutoPostBackAutoPostBack 屬性屬性 -- 控制項控制項

WebWeb 控制項支援控制項支援 AutoPostBackAutoPostBack 屬性和其屬性和其觸發的事件,如下表所示:觸發的事件,如下表所示:

Web控制項 支援的事件

TextBox OnTextChanged

CheckBox、RadioButton OnCheckChanged

DropDownList 、 CheckBoxList 、ListBox、RadioButtonList

OnSelectedIndexChanged

Page 7: Ch07  表單欄位驗證控制項

77

範例範例 1:IsPostBack1:IsPostBack與與 AutoPostBackAutoPostBack 的比的比較較1.1. <%@ Page Language="VB" %><%@ Page Language="VB" %>

2.2. <html><html>3.3. <head><head>4.4. <title> <title>

WebWeb 表單的表單的 IsPostBackIsPostBack 屬性屬性 </title></title>5.5. <script language="VB" runat="server"><script language="VB" runat="server">6.6. Sub Page_Load(S as Object, E as Sub Page_Load(S as Object, E as

EventArgs)EventArgs)7.7. If Page.IsPostBack ThenIf Page.IsPostBack Then8.8. If name.Text <> "" ThenIf name.Text <> "" Then9.9. show.Text = name.Text & "show.Text = name.Text & " 歡迎進歡迎進

入網頁入網頁 !"!"10.10. End IfEnd If11.11. ElseElse12.12. name.Text = ""name.Text = ""13.13. lblName.Text = "lblName.Text = " 輸入姓名輸入姓名 : ": "14.14. End IfEnd If15.15. End SubEnd Sub16.16. </script> </script> 17.17. </head></head>18.18.

1.1. <body><body>2.2. <h2> <h2>

WebWeb 表單的表單的 IsPostBackIsPostBack 屬性屬性 </h2><hr></h2><hr>3.3. <form runat="Server"><form runat="Server">4.4. <asp:Label id="lblName" runat="Server“/><asp:Label id="lblName" runat="Server“/>5.5. <asp:Textbox id="name" runat="Server"/><asp:Textbox id="name" runat="Server"/>6.6. <asp:button text="<asp:button text=" 送出送出 " runat="Server"/>" runat="Server"/>7.7. </form></form>8.8. <asp:Label id="show" runat="server" /><asp:Label id="show" runat="server" />9.9. </body></body>10.10.</html> </html>

Page 8: Ch07  表單欄位驗證控制項

88

範例範例 1:IsPostBack1:IsPostBack與與 AutoPostBackAutoPostBack 的比的比較較1.1. <%@ Page Language="VB" %><%@ Page Language="VB" %>

2.2. <html><html>3.3. <head><head>4.4.

<title><title> 控制項的控制項的 AutoPostBackAutoPostBack 屬性屬性 </title></title>5.5. <script language="VB" runat="server"><script language="VB" runat="server">6.6. Sub Page_Load(S as Object, E as Sub Page_Load(S as Object, E as

EventArgs)EventArgs)7.7. If Page.IsPostBack ThenIf Page.IsPostBack Then8.8. If name.Text <> "" ThenIf name.Text <> "" Then9.9. show.Text = name.Text & "show.Text = name.Text & " 歡迎進歡迎進

入網頁入網頁 !"!"10.10. End IfEnd If11.11. ElseElse12.12. name.Text = ""name.Text = ""13.13. lblName.Text = "lblName.Text = " 輸入姓名輸入姓名 : ": "14.14. End IfEnd If15.15. End SubEnd Sub16.16. Sub Change_Name(S as Object, E as Sub Change_Name(S as Object, E as

EventArgs)EventArgs)17.17. show.Text = name.Text & "show.Text = name.Text & " 你好你好 !"!"18.18. End SubEnd Sub19.19. </script> </script> 20.20. </head></head>21.21.

1.1. <body><body>2.2.

<h2><h2> 控制項的控制項的 AutoPostBackAutoPostBack 屬性屬性 </h2><hr></h2><hr>3.3. <form runat="Server"><form runat="Server">4.4. <asp:Label id="lblName" runat="Server"/><asp:Label id="lblName" runat="Server"/>5.5. <asp:Textbox id="name" runat="Server"<asp:Textbox id="name" runat="Server"6.6. AutoPostBack="True"AutoPostBack="True"7.7. OnTextChanged="Change_Name"/>OnTextChanged="Change_Name"/>8.8. <asp:button text="<asp:button text=" 送出送出 " runat="Server"/>" runat="Server"/>9.9. </form></form>10.10. <asp:Label id="show" runat="server" /><asp:Label id="show" runat="server" />11.11. </body></body>12.12.</html> </html>

Page 9: Ch07  表單欄位驗證控制項

99

ASP.NETASP.NET 的表單欄位驗證的表單欄位驗證 -- 說明說明 WebWeb 表單是表單是 ASP.NETASP.NET 應用程式的輸入介應用程式的輸入介

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

Page 10: Ch07  表單欄位驗證控制項

1010

ASP.NETASP.NET 的表單欄位驗證的表單欄位驗證 -- 種類種類驗證控制項 說明

RequiredFieldValidator 使用者一定需要輸入資料或選取選項,不能跳過此

欄位不輸入,例如:不可以不輸入使用者名稱

CompareValidator 將使用者輸入控制項的值,與常數或其它控制項值

進行比較,例如:兩次輸入的密碼是否相同

RangeValidator 使用者輸入控制項的值是一個範圍,需要在一定範

圍才符合規則,例如:年齡需要大於 20,小於 70

RegularExpressionValidator 使用「正規運算式」(Regular Expression)的範本

字串檢查輸入的資料,例如:輸入的電子郵件地址

是否符合格式

CustomValidator 自行撰寫程序來檢查控制項的欄位值

ValidationSummary 顯示Web表單所有驗證控制項錯誤訊息的摘要資訊

Page 11: Ch07  表單欄位驗證控制項

1111

ASP.NETASP.NET 的表單欄位驗證的表單欄位驗證 -- 使用使用 如果如果 WebWeb 表單擁有上表的欄位驗證控制項,表單擁有上表的欄位驗證控制項,

就可以檢查就可以檢查 PagePage 物件的物件的 IsValidIsValid 屬性,以屬性,以確認表單是否通過驗證,如下所示:確認表單是否通過驗證,如下所示:If Page.IsValid ThenIf Page.IsValid Then

……… ………

End IfEnd If

IfIf 條例的程式碼在確認條例的程式碼在確認 IsValidIsValid 屬性為屬性為TrueTrue ,,表示通過驗證,接著才可以執行表示通過驗證,接著才可以執行WebWeb 表單的處理。表單的處理。

Page 12: Ch07  表單欄位驗證控制項

1212

RequiredFieldValidatorRequiredFieldValidator 驗證控制項驗證控制項 -- 使使用用

RequiredFieldValidatorRequiredFieldValidator 驗證控制項可以檢驗證控制項可以檢查指定控制項是否忘了輸入資料或沒有選查指定控制項是否忘了輸入資料或沒有選取選項,如下所示:取選項,如下所示:<<asp:RequiredFieldValidator id="validName"asp:RequiredFieldValidator id="validName"

ControlToValidate="name"ControlToValidate="name"

ErrorMessage="ErrorMessage=" 必須輸入使用者名稱必須輸入使用者名稱 !"!"

runat="Server"/>runat="Server"/>

Page 13: Ch07  表單欄位驗證控制項

1313

RequiredFieldValidatorRequiredFieldValidator 驗證控制項驗證控制項 -- 屬屬性性

屬性 說明

ControlToValidate 指出是驗證那一個控制項,即其它控制項 id屬性值

ErrorMessage 設定驗證錯誤時顯示的訊息

ForeColor 設定或取得錯誤訊息顯示的色彩,預設為紅色

InitialValue 設定和取得驗證控制項的初值

Page 14: Ch07  表單欄位驗證控制項

1414

RequiredFieldValidatorRequiredFieldValidator 驗證控制項驗證控制項 --InitialValueInitialValue 屬屬性性

InitialValueInitialValue 屬性是用來指定驗證欄位屬性是用來指定驗證欄位不能不能輸入輸入的值,如下所示:的值,如下所示:<<asp:RequiredFieldValidator id="validPass"asp:RequiredFieldValidator id="validPass"

ControlToValidate="pass" InitialValue="1234"ControlToValidate="pass" InitialValue="1234"

ErrorMessage="ErrorMessage=" 必須輸入使用者密碼必須輸入使用者密碼 !"!"

runat="Server"/>runat="Server"/>

驗證控制項要求驗證控制項要求 TextBoxTextBox 控制項控制項 passpass 的值的值不可以是【不可以是【 12341234 】,可以是空白。】,可以是空白。

Page 15: Ch07  表單欄位驗證控制項

1515

範例範例 2:2: 使用使用 RequiredFieldValidatorRequiredFieldValidator控制項測試是否有輸入值控制項測試是否有輸入值

1.1. <Html><Html>2.2. <head><head>3.3. <title>RequiredFieldValidator<title>RequiredFieldValidator 控制項控制項 </title></title>4.4. <Script Language="VB" Runat="Server"><Script Language="VB" Runat="Server">5.5. Sub Button1_Click(Sender As Object, e As EventArgs)Sub Button1_Click(Sender As Object, e As EventArgs)6.6. If Page.IsValid ThenIf Page.IsValid Then7.7. Table1.Visible="False"Table1.Visible="False"8.8. Label1.Text="Label1.Text=" 恭喜您註冊成功恭喜您註冊成功 <Br>"<Br>"9.9. Label5.Text="Label5.Text=" 您的帳號是:您的帳號是: " & TextBox1.Text" & TextBox1.Text10.10. Label5.Text+="<Br>Label5.Text+="<Br> 您的密碼是:您的密碼是: " & TextBox2.Text" & TextBox2.Text11.11. If TextBox3.Text="" ThenIf TextBox3.Text="" Then12.12. Label5.Text+="<Br>Label5.Text+="<Br> 您未填寫註冊的您未填寫註冊的 E-Mail"E-Mail"13.13. ElseElse14.14. Label5.Text+="<Br>Label5.Text+="<Br> 您的註冊的您的註冊的 E-MailE-Mail 是:是: " & TextBox3.Text" & TextBox3.Text15.15. End IfEnd If16.16. ElseElse17.17. Label5.Text="AAA"Label5.Text="AAA"18.18. End IfEnd If19.19. End SubEnd Sub20.20. </Script></Script>21.21.</head></head>

Page 16: Ch07  表單欄位驗證控制項

1616

範例範例 2:2: 使用使用 RequiredFieldValidatorRequiredFieldValidator控制項測試是否有輸入值控制項測試是否有輸入值 ((續續 ))22.22. <Body><Body>

23.23. <ASP:Label Id="Label1" Runat="Server" Font-Size="14"<ASP:Label Id="Label1" Runat="Server" Font-Size="14"24.24. ForeColor="Blue" Text="ForeColor="Blue" Text=" 請輸入下列註冊資料請輸入下列註冊資料 "/>"/>25.25. <Form Runat="Server"><Form Runat="Server">26.26. <ASP:Table Id="Table1" Runat="Server"><ASP:Table Id="Table1" Runat="Server">27.27. <ASP:TableRow Id="Row1" Runat="Server"><ASP:TableRow Id="Row1" Runat="Server">28.28. <ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right">29.29. <ASP:Label Id="Label2" Runat="Server" Text="<ASP:Label Id="Label2" Runat="Server" Text=" 帳號:帳號: "/>"/>30.30. </ASP:TableCell></ASP:TableCell>31.31. <ASP:TableCell Id="Cell2" Runat="Server"><ASP:TableCell Id="Cell2" Runat="Server">32.32. <ASP:TextBox Id="TextBox1" Runat="Server"/><ASP:TextBox Id="TextBox1" Runat="Server"/>33.33. <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" 34.34. ControlToValidate="TextBox1" Text="ControlToValidate="TextBox1" Text=" 必須要有資料必須要有資料 " ForeColor="Red"/>" ForeColor="Red"/>35.35. </ASP:TableCell></ASP:TableCell>36.36. </ASP:TableRow></ASP:TableRow>37.37. <ASP:TableRow Id="Row2" Runat="Server"><ASP:TableRow Id="Row2" Runat="Server">38.38. <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right">39.39. <ASP:Label Id="Label3" Runat="Server" Text="<ASP:Label Id="Label3" Runat="Server" Text=" 密碼:密碼: "/>"/>40.40. </ASP:TableCell></ASP:TableCell>41.41. <ASP:TableCell Id="Cell4" Runat="Server"><ASP:TableCell Id="Cell4" Runat="Server">42.42. <ASP:TextBox Id="TextBox2" Runat="Server" TextMode="Password"/><ASP:TextBox Id="TextBox2" Runat="Server" TextMode="Password"/>43.43. <ASP:RequiredFieldValidator Id="Validator2" Runat="Server" <ASP:RequiredFieldValidator Id="Validator2" Runat="Server" 44.44. ControlToValidate="TextBox2" Text="ControlToValidate="TextBox2" Text=" 必須要有資料必須要有資料 " ForeColor="Red"/>" ForeColor="Red"/>45.45. </ASP:TableCell></ASP:TableCell>46.46. </ASP:TableRow></ASP:TableRow>

Page 17: Ch07  表單欄位驗證控制項

1717

範例範例 2:2: 使用使用 RequiredFieldValidatorRequiredFieldValidator控制項測試是否有輸入值控制項測試是否有輸入值 ((續續 ))

47.47. <ASP:TableRow Id="Row3" Runat="Server"><ASP:TableRow Id="Row3" Runat="Server">48.48. <ASP:TableCell Id="Cell5" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell5" Runat="Server" HorizontalAlign="Right">49.49. <ASP:Label Id="Label4" Runat="Server" Text="E-Mail<ASP:Label Id="Label4" Runat="Server" Text="E-Mail :: "/>"/>50.50. </ASP:TableCell></ASP:TableCell>51.51. <ASP:TableCell Id="Cell6" Runat="Server"><ASP:TableCell Id="Cell6" Runat="Server">52.52. <ASP:TextBox Id="TextBox3" Runat="Server"/><ASP:TextBox Id="TextBox3" Runat="Server"/>53.53. </ASP:TableCell></ASP:TableCell>54.54. </ASP:TableRow></ASP:TableRow>

55.55. <ASP:TableRow Id="Row4" Runat="Server"><ASP:TableRow Id="Row4" Runat="Server">56.56. <ASP:TableCell Id="Cell7" Runat="Server" Colspan="2"><ASP:TableCell Id="Cell7" Runat="Server" Colspan="2">57.57. <ASP:Button Id="Button1" Runat="Server" Text="<ASP:Button Id="Button1" Runat="Server" Text=" 送出註冊送出註冊 " "

OnClick="Button1_Click"/><P>OnClick="Button1_Click"/><P>58.58. </ASP:TableCell></ASP:TableCell>59.59. </ASP:TableRow></ASP:TableRow>60.60.</ASP:Table></ASP:Table>61.61.</Form></Form>62.62.<ASP:Label Id="Label5" Runat="Server"/><ASP:Label Id="Label5" Runat="Server"/>63.63.</Body></Body>64.64.</Html> </Html>

Page 18: Ch07  表單欄位驗證控制項

1818

CompareValidatorCompareValidator 驗證控制項驗證控制項 -- 使使用用

CompareValidatorCompareValidator 驗證控制項是用來比較驗證控制項是用來比較22 個控制項的值,或是與指定常數值進行比個控制項的值,或是與指定常數值進行比較,如下所示:較,如下所示:

<<asp:CompareValidator id="validComp" asp:CompareValidator id="validComp"

ControlToValidate="pass" ControlToCompare = "pass1“ControlToValidate="pass" ControlToCompare = "pass1“

Operator=“Operator=“ 比較運算子比較運算子” ”

Type="String" Display="Dynamic"Type="String" Display="Dynamic"

ErrorMessage="ErrorMessage=" 兩次輸入的密碼不同兩次輸入的密碼不同 !" !"

runat="Server"/>runat="Server"/>

Page 19: Ch07  表單欄位驗證控制項

1919

CompareValidatorCompareValidator 驗證控制項驗證控制項 -- 屬屬性性

屬性 說明

ControlToCompare 設定和取得比較的另一個控制項名稱

ValueToCompare 設定和取得比較的常數值

Display 驗證控制項都擁有此屬性,屬性預設值 Static 表示固定

佔用網頁顯示空間,值 Dynamic 表示如果驗證失敗,驗

證訊息才會動態加入網頁的顯示空間

Type 設定在比較前轉換成的資料型態,可以是 String、Integer、Double、Date和 Currency資料型態

Operator 設定和取得使用的比較運算子,預設是 Equal

Page 20: Ch07  表單欄位驗證控制項

2020

CompareValidatorCompareValidator 驗證控制項驗證控制項 --OperatorOperator 屬性的比較運算子屬性的比較運算子

運算子 說明

Equal 相等

NotEqual 不相等

GreaterThan 大於

GreaterThanEqual 大於等於

LessThan 小於

LessThanEqual 小於等於

DataTypeCheck 資料型態的比較,比較控制項的值是否為 Type 屬性指定

的資料型態,驗證錯誤是指值無法轉換成指定的資料型態

Page 21: Ch07  表單欄位驗證控制項

2121

範例範例 3: 3: 測試新舊密碼測試新舊密碼 (CompareValidator(CompareValidator 控控制項中的制項中的 ControlToCompare)ControlToCompare)

1.1. <Html><Html>2.2. <head><head>3.3. <title>CompareValidator<title>CompareValidator 控制項中的控制項中的

ControlToCompare</title>ControlToCompare</title>4.4. <Script Language="VB" Runat="Server"><Script Language="VB" Runat="Server">5.5. Sub Button1_Click(Sender As Object, e As EventArgs)Sub Button1_Click(Sender As Object, e As EventArgs)6.6. If Page.IsValid ThenIf Page.IsValid Then7.7. Label1.Text="Label1.Text=" 密碼更改成功!!密碼更改成功!! ""8.8. End IfEnd If9.9. End SubEnd Sub10.10.</Script></Script>11.11.</head></head>

Page 22: Ch07  表單欄位驗證控制項

2222

範例範例 3: 3: 測試新舊密碼測試新舊密碼 (CompareValidator(CompareValidator 控控制項中的制項中的 ControlToCompare)ControlToCompare)

12.12. <Body><Body>13.13. <Form Runat="Server"><Form Runat="Server">14.14. <ASP:Table Id="Table1" Runat="Server"><ASP:Table Id="Table1" Runat="Server">15.15. <ASP:TableRow Id="Row1" Runat="Server"><ASP:TableRow Id="Row1" Runat="Server">16.16. <ASP:TableCell Id="Cell1" Runat="Server" ColumnSpan="2" <ASP:TableCell Id="Cell1" Runat="Server" ColumnSpan="2"

HorizontalAlign="Center">HorizontalAlign="Center">17.17. <ASP:Label Id="Label1" Runat="Server" Text="<ASP:Label Id="Label1" Runat="Server" Text=" 更 改 密 碼更 改 密 碼 ""18.18. ForeColor="Blue" Font-Size="14"/>ForeColor="Blue" Font-Size="14"/>19.19. </ASP:TableCell></ASP:TableCell>20.20. </ASP:TableRow></ASP:TableRow>

21.21. <ASP:TableRow Id="Row3" Runat="Server"><ASP:TableRow Id="Row3" Runat="Server">22.22. <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right">23.23. <ASP:Label Id="Label3" Runat="Server" Text="<ASP:Label Id="Label3" Runat="Server" Text=" 新密碼:新密碼: "/>"/>24.24. </ASP:TableCell></ASP:TableCell>25.25. <ASP:TableCell Id="Cell5" Runat="Server"><ASP:TableCell Id="Cell5" Runat="Server">26.26. <ASP:TextBox Id="TextBox2" Runat="Server"/><ASP:TextBox Id="TextBox2" Runat="Server"/>27.27. </ASP:TableCell></ASP:TableCell>28.28. </ASP:TableRow></ASP:TableRow>29.29.

Page 23: Ch07  表單欄位驗證控制項

2323

範例範例 3: 3: 測試新舊密碼測試新舊密碼 (CompareValidator(CompareValidator 控控制項中的制項中的 ControlToCompare)ControlToCompare)

30.30. <ASP:TableRow Id="Row4" Runat="Server"><ASP:TableRow Id="Row4" Runat="Server">31.31. <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right">32.32. <ASP:Label Id="Label4" Runat="Server" Text="<ASP:Label Id="Label4" Runat="Server" Text=" 確認新密碼:確認新密碼: "/>"/>33.33. </ASP:TableCell></ASP:TableCell>34.34. <ASP:TableCell Id="Cell7" Runat="Server"><ASP:TableCell Id="Cell7" Runat="Server">35.35. <ASP:TextBox Id="TextBox3" Runat="Server"/><ASP:TextBox Id="TextBox3" Runat="Server"/>36.36. </ASP:TableCell></ASP:TableCell>37.37. </ASP:TableRow></ASP:TableRow>38.38. 39.39. <ASP:TableRow Id="Row5" Runat="Server"><ASP:TableRow Id="Row5" Runat="Server">40.40. <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Center"><ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Center">41.41. <ASP:Button Id="Button1" Runat="Server" Text="<ASP:Button Id="Button1" Runat="Server" Text=" 更改密碼更改密碼 ""42.42. OnClick="Button1_Click"/>OnClick="Button1_Click"/>43.43. </ASP:TableCell></ASP:TableCell>44.44. <ASP:TableCell Id="Cell9" Runat="Server"><ASP:TableCell Id="Cell9" Runat="Server">45.45. <asp:CompareValidator id="Comp1" runat="server"<asp:CompareValidator id="Comp1" runat="server"46.46. ControlToValidate="TextBox3"ControlToValidate="TextBox3"47.47. ControlToCompare="TextBox2"ControlToCompare="TextBox2"48.48. Type="String" Operator="Equal"Type="String" Operator="Equal"49.49. Text="* Text="* 新密碼不符合新密碼不符合 "/>"/>50.50. </asp:CompareValidator></asp:CompareValidator>51.51. </ASP:TableCell></ASP:TableCell>52.52. </ASP:TableRow></ASP:TableRow>53.53. </ASP:Table></ASP:Table>54.54. </Form></Form>

Page 24: Ch07  表單欄位驗證控制項

2424

範例範例 4: 4: 新增行事曆新增行事曆 (( 行事曆的日期必須在今行事曆的日期必須在今天以後的日子天以後的日子 ))

1.1. <Html><Html>2.2. <head><head>3.3. <title><title> 新增在今天之後的行事曆新增在今天之後的行事曆 </title></title>4.4. <Script Language="VB" Runat="Server"><Script Language="VB" Runat="Server">5.5. Sub Page_Load(Sender As Object, e As EventArgs)Sub Page_Load(Sender As Object, e As EventArgs)6.6. Validator2.ValueToCompare=DateTime.Today()Validator2.ValueToCompare=DateTime.Today()7.7. End SubEnd Sub8.8. 9.9. Sub Button1_Click(Sender As Object, e As EventArgs)Sub Button1_Click(Sender As Object, e As EventArgs)10.10. If Page.IsValid ThenIf Page.IsValid Then11.11. Table1.Visible="False"Table1.Visible="False"12.12. Label1.Text="Label1.Text=" 新增行事曆內容成功新增行事曆內容成功 <Br>"<Br>"13.13. Label4.Text="Label4.Text=" 時間:時間: " & TextBox1.Text" & TextBox1.Text14.14. Label4.Text+="<Br>Label4.Text+="<Br> 內容:內容: " & Replace(TextBox2.Text,Chr(13),"<Br>")" & Replace(TextBox2.Text,Chr(13),"<Br>")15.15. End IfEnd If16.16. End SubEnd Sub17.17.</Script></Script>18.18.</head></head>

Page 25: Ch07  表單欄位驗證控制項

2525

範例範例 4: 4: 新增行事曆新增行事曆 (( 行事曆的日期必須在今行事曆的日期必須在今天以後的日子天以後的日子 ))

19.19.<Body><Body>20.20.<ASP:Label Id="Label1" Runat="Server" Font-Size="14"<ASP:Label Id="Label1" Runat="Server" Font-Size="14"21.21. ForeColor="Blue" Text="ForeColor="Blue" Text=" 新增行事曆內容新增行事曆內容 "/>"/>22.22.<Form Runat="Server"><Form Runat="Server">23.23.<ASP:Table Id="Table1" Runat="Server"><ASP:Table Id="Table1" Runat="Server">24.24. <ASP:TableRow Id="Row1" Runat="Server"><ASP:TableRow Id="Row1" Runat="Server">25.25. <ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell1" Runat="Server" HorizontalAlign="Right">26.26. <ASP:Label Id="Label2" Runat="Server" Text="<ASP:Label Id="Label2" Runat="Server" Text=" 日期:日期: "/>"/>27.27. </ASP:TableCell></ASP:TableCell>28.28. <ASP:TableCell Id="Cell2" Runat="Server"><ASP:TableCell Id="Cell2" Runat="Server">29.29. <ASP:TextBox Id="TextBox1" Runat="Server" Text="<ASP:TextBox Id="TextBox1" Runat="Server" Text=" 輸入格式:輸入格式: yyyy/mm/dd"/>yyyy/mm/dd"/>30.30. <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" <ASP:RequiredFieldValidator Id="Validator1" Runat="Server" 31.31. ControlToValidate="TextBox1" Text="ControlToValidate="TextBox1" Text=" 必須要有資料必須要有資料 " ForeColor="Red"/>" ForeColor="Red"/>32.32. </ASP:TableCell></ASP:TableCell>33.33. </ASP:TableRow></ASP:TableRow>34.34. <ASP:TableRow Id="Row2" Runat="Server"><ASP:TableRow Id="Row2" Runat="Server">35.35. <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right">36.36. <ASP:Label Id="Label3" Runat="Server" Text="<ASP:Label Id="Label3" Runat="Server" Text=" 內容:內容: "/>"/>37.37. </ASP:TableCell></ASP:TableCell>38.38. <ASP:TableCell Id="Cell4" Runat="Server"><ASP:TableCell Id="Cell4" Runat="Server">39.39. <ASP:TextBox Id="TextBox2" Runat="Server" TextMode="MultiLine" Rows="4"/><ASP:TextBox Id="TextBox2" Runat="Server" TextMode="MultiLine" Rows="4"/>40.40. </ASP:TableCell></ASP:TableCell>41.41. </ASP:TableRow></ASP:TableRow>

Page 26: Ch07  表單欄位驗證控制項

2626

範例範例 4: 4: 新增行事曆新增行事曆 (( 行事曆的日期必須在今行事曆的日期必須在今天以後的日子天以後的日子 ))

42.42. <ASP:TableRow Id="Row3" Runat="Server"><ASP:TableRow Id="Row3" Runat="Server">43.43. <ASP:TableCell Id="Cell5" Runat="Server" Colspan="2"><ASP:TableCell Id="Cell5" Runat="Server" Colspan="2">44.44. <ASP:Button Id="Button1" Runat="Server" Text="<ASP:Button Id="Button1" Runat="Server" Text=" 新增內容新增內容 " "

OnClick="Button1_Click"/><P>OnClick="Button1_Click"/><P>45.45. </ASP:TableCell></ASP:TableCell>46.46. </ASP:TableRow></ASP:TableRow>47.47. 48.48. <ASP:TableRow Id="Row4" Runat="Server"><ASP:TableRow Id="Row4" Runat="Server">49.49. <ASP:TableCell Id="Cell6" Runat="Server" Colspan="2"><ASP:TableCell Id="Cell6" Runat="Server" Colspan="2">50.50. <ASP:CompareValidator Id="Validator2" Runat="Server"<ASP:CompareValidator Id="Validator2" Runat="Server"51.51. ControlToValidate="TextBox1"ControlToValidate="TextBox1"52.52. Operator="GreaterThanEqual"Operator="GreaterThanEqual"53.53. Type=“Date" Text="Type=“Date" Text=" 請輸入今天以後的日期請輸入今天以後的日期 (( 含今天含今天 )"/>)"/>54.54. </ASP:TableCell></ASP:TableCell>55.55. </ASP:TableRow></ASP:TableRow>56.56.</ASP:Table></ASP:Table>57.57.</Form></Form>58.58.<ASP:Label Id="Label4" Runat="Server"/><ASP:Label Id="Label4" Runat="Server"/>59.59.</Body></Body>60.60.</Html> </Html>

Page 27: Ch07  表單欄位驗證控制項

2727

RangeValidatorRangeValidator 驗證控制項驗證控制項 -- 使使用用

RangeValidatorRangeValidator 驗證控制項可以檢查控制驗證控制項可以檢查控制項的值是否在項的值是否在指定的範圍指定的範圍內,如下所示:內,如下所示:

<<asp:RangeValidator id="validRange"asp:RangeValidator id="validRange"

ControlToValidate="age" Display="Dynamic"ControlToValidate="age" Display="Dynamic"

Type="Integer"Type="Integer"

MinimumValue="21" MaximumValue="70"MinimumValue="21" MaximumValue="70"

ErrorMessage="ErrorMessage=" 年齡的範圍是年齡的範圍是 21 ~ 70!"21 ~ 70!"

runat="server"/>runat="server"/>

Page 28: Ch07  表單欄位驗證控制項

2828

RangeValidatorRangeValidator 驗證控制項驗證控制項 -- 屬屬性性

屬性 說明

MaximumValue 設定和取得比較範圍的最大值

MinimumValue 設定和取得比較範圍的最小值

Type 設定在比較前需要轉換成的資料型態,可以是 String、Integer、Double、Date和 Currency資料型態

Page 29: Ch07  表單欄位驗證控制項

2929

範例範例 5: 5: 輸入成績輸入成績 (( 使用使用 RangeValidatorRangeValidator 控控制項制項 ))

1.1. <Html><Html>2.2. <head><head>3.3. <title><title> 成績輸入成績輸入 (( 使用使用 RangeValidatorRangeValidator 控制輸入範圍在控制輸入範圍在 0~1000~100間間 )</title>)</title>4.4. <Script Language="VB" Runat="Server"><Script Language="VB" Runat="Server">5.5. Sub Button1_Click(Sender As Object, e As EventArgs)Sub Button1_Click(Sender As Object, e As EventArgs)6.6. If Page.IsValid ThenIf Page.IsValid Then7.7. IF TextBox1.Text > 60 ThenIF TextBox1.Text > 60 Then8.8. Label2.Text="Label2.Text=" 您的分數是:您的分數是: " & TextBox1.Text" & TextBox1.Text9.9. Label2.Text+="Label2.Text+=" ,恭喜您過關了!,恭喜您過關了! ""10.10. ElseElse11.11. Label2.ForeColor=System.Drawing.Color.RedLabel2.ForeColor=System.Drawing.Color.Red12.12. Label2.Text="Label2.Text=" 您的分數是:您的分數是: " & TextBox1.Text" & TextBox1.Text13.13. Label2.Text+="Label2.Text+=" 要再加油囉!!要再加油囉!! ""14.14. End IfEnd If15.15. End IfEnd If16.16. End SubEnd Sub17.17.</Script></Script>18.18.</head></head>

Page 30: Ch07  表單欄位驗證控制項

3030

範例範例 5: 5: 輸入成績輸入成績 (( 使用使用 RangeValidatorRangeValidator 控控制項制項 ))19.19. <Body><Body>

20.20. <Form Runat="Server"><Form Runat="Server">21.21. <ASP:Table Id="Table1" Runat="Server" <ASP:Table Id="Table1" Runat="Server" 22.22. BorderColor="LightBlue" BorderWidth="3">BorderColor="LightBlue" BorderWidth="3">23.23. <ASP:TableRow Id="Row1" Runat="Server"><ASP:TableRow Id="Row1" Runat="Server">24.24. <ASP:TableCell Id="Cell1" Runat="Server"><ASP:TableCell Id="Cell1" Runat="Server">25.25. <ASP:Label Id="Label1" Runat="Server" Text="<ASP:Label Id="Label1" Runat="Server" Text=" 請輸入成績:請輸入成績: "/>"/>26.26. </ASP:TableCell></ASP:TableCell>27.27. <ASP:TableCell Id="Cell2" Runat="Server"><ASP:TableCell Id="Cell2" Runat="Server">28.28. <ASP:TextBox Id="TextBox1" Runat="Server"/><ASP:TextBox Id="TextBox1" Runat="Server"/>29.29. </ASP:TableCell></ASP:TableCell>30.30. </ASP:TableRow></ASP:TableRow>31.31. <ASP:TableRow Id="Row2" Runat="Server"><ASP:TableRow Id="Row2" Runat="Server">32.32. <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Center"><ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Center">33.33. <ASP:Button Id="Button1" Runat="Server" Text="<ASP:Button Id="Button1" Runat="Server" Text=" 確定確定 ""34.34. OnClick="Button1_Click"/>OnClick="Button1_Click"/>35.35. </ASP:TableCell></ASP:TableCell>36.36. <ASP:TableCell Id="Cell4" Runat="Server"><ASP:TableCell Id="Cell4" Runat="Server">37.37. <ASP:RangeValidator Id="Comp1" Runat="Server"<ASP:RangeValidator Id="Comp1" Runat="Server"38.38. ControlToValidate="TextBox1"ControlToValidate="TextBox1"39.39. MinimumValue="0"MinimumValue="0"40.40. MaximumValue="100"MaximumValue="100"41.41. Type="Integer"Type="Integer"42.42. Text="Text=" 請輸入請輸入 0~1000~100 之間的數字之間的數字 "/>"/>43.43. </ASP:TableCell></ASP:TableCell>44.44. </ASP:TableRow></ASP:TableRow>45.45. </ASP:Table></ASP:Table>46.46. </Form></Form>47.47. <ASP:Label Id="Label2" Runat="Server"/><ASP:Label Id="Label2" Runat="Server"/>48.48. </Body></Body>49.49. </Html></Html>

輸入的值只可以是整數 , 所以 70.5 是不合法的 , 如果要讓 70.5 合法 , 必須設定 Type=“Double”

Page 31: Ch07  表單欄位驗證控制項

3131

RegularExpressionValidatorRegularExpressionValidator 驗證控制驗證控制項項 -- 正規運算式正規運算式

「正規運算式」(「正規運算式」( Regular ExpressionRegular Expression ))是一個範本字串,能夠進行字串的比對,是一個範本字串,能夠進行字串的比對,例如:檢查使用者名稱、電子郵件地址等例如:檢查使用者名稱、電子郵件地址等字串格式是否符合需求。字串格式是否符合需求。

在正規運算式的範本字串中,每一個字元在正規運算式的範本字串中,每一個字元都有特殊意義,屬於一種小型的字串比對都有特殊意義,屬於一種小型的字串比對語言,正規運算式直譯程式或稱引擎能夠語言,正規運算式直譯程式或稱引擎能夠將定義的正規運算式和字串變數進行比較,將定義的正規運算式和字串變數進行比較,引擎傳回布林值,引擎傳回布林值, TrueTrue 表示字串符合範本表示字串符合範本字串的定義,字串的定義, FalseFalse 表示不符合。表示不符合。

Page 32: Ch07  表單欄位驗證控制項

3232

RegularExpressionValidatorRegularExpressionValidator 驗證控制項驗證控制項 --字元與字元集字元與字元集 11

字元集 說明

[abc] 英文字母 a、b或 c

[abc\{] 英文字母 a、b、c或符號{

[a-z] 任何英文的小寫字母

[A-Z] 任何英文的大寫字母

[0-9] 數字 0~9

[a-zA-Z] 任何大小寫的英文字母

[^abc] 除了 a、b和 c以外的任何字元

Page 33: Ch07  表單欄位驗證控制項

3333

RegularExpressionValidatorRegularExpressionValidator 驗證控制驗證控制項項 -- 字元與字元集字元與字元集 22

Escape字串 說明

\w [0-9a-zA-Z_]任何字元和底線

\W [^0-9a-zA-Z_]任何不是英文字母、數字和底線字元,也就是

[^\w]

\d [0-9]任何數字字元

\D [^0-9]任何非數字的字元

Page 34: Ch07  表單欄位驗證控制項

3434

RegularExpressionValidatorRegularExpressionValidator 驗證控制驗證控制項項 -- 字元與字元集字元與字元集 33

字元 說明

^ 比對字串的開始

$ 比對字串的結束

? 0或 1次

* 0或很多次

+ 1或很多次

{n} 出現 n次

{n,m} 出現 n到 m次

{n,} 至少出現 n次

Page 35: Ch07  表單欄位驗證控制項

3535

RegularExpressionValidatorRegularExpressionValidator 驗驗證控制項證控制項 -- 正規運算式範例正規運算式範例

正規語言字串 說明

a?bc 符合 abc、bc字串

a*bc 符合 bc、abc、aabc、aaabc字串等

a+bc 符合 abc、aabc、aaabc字串等

ab{3}c 符合 abbbc字串,不可以是 abbc或 abc

ab{2,}c 符合 abbc、abbbc、abbbbc等字串

ab{1,3}c 符合 abc、abbc和 abbbc字串

[a-zA-Z]{1,} 至少一個英文字元的字串

\d{1,} 至少一個數字字元的字串

Page 36: Ch07  表單欄位驗證控制項

3636

RegularExpressionValidatorRegularExpressionValidator 驗證控制項驗證控制項 --使用使用

在在 WebWeb 表單的表單的RegularExpressionValidatorRegularExpressionValidator 驗證控制項可驗證控制項可以指定使用正規運算式的範本字串來進行以指定使用正規運算式的範本字串來進行資料驗證,如下所示:資料驗證,如下所示:

<<asp:RegularExpressionValidator id="ValidRegxEmail"asp:RegularExpressionValidator id="ValidRegxEmail"

ControlToValidate="email" Display="Static"ControlToValidate="email" Display="Static"

ValidationExpression="[\w\.]+@[\w\.]*"ValidationExpression="[\w\.]+@[\w\.]*"

ErrorMessage="ErrorMessage=" 郵件地址的格式錯誤郵件地址的格式錯誤 ""

runat="Server"/>runat="Server"/>

Page 37: Ch07  表單欄位驗證控制項

3737

RegularExpressionValidatorRegularExpressionValidator 驗證控制驗證控制項項 -- 屬性屬性

屬性 說明

ValidationExpression 設定和取得正規運算式的範本字串

Page 38: Ch07  表單欄位驗證控制項

3838

範例範例 6:6: 驗證身份證字號、電話、電子郵驗證身份證字號、電話、電子郵件件 (RegularExpressionValidator)(RegularExpressionValidator)

1.1. <Html><Html>2.2. <head><head>3.3. <title><title> 驗證身份證字號、電話、電子郵件驗證身份證字號、電話、電子郵件

(RegularExpressionValidator)</title>(RegularExpressionValidator)</title>4.4. <Script Language="VB" Runat="Server"><Script Language="VB" Runat="Server">5.5. Sub Button1_Click(Sender As Object, e As EventArgs)Sub Button1_Click(Sender As Object, e As EventArgs)6.6. If Page.IsValid ThenIf Page.IsValid Then7.7. Label1.Text="Label1.Text=" 驗証成功驗証成功 ""8.8. End IfEnd If9.9. End SubEnd Sub10.10.</Script></Script>11.11.</head></head>

Page 39: Ch07  表單欄位驗證控制項

3939

範例範例 6:6: 驗證身份證字號、電話、電子郵驗證身份證字號、電話、電子郵件件 (RegularExpressionValidator)(RegularExpressionValidator)

12.12. <Body><Body>13.13. <Form Runat="Server"><Form Runat="Server">14.14. <ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue"><ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue">15.15. <ASP:TableRow Id="Row1" Runat="Server"><ASP:TableRow Id="Row1" Runat="Server">16.16. <ASP:TableCell Id="Cell1" Runat="Server" <ASP:TableCell Id="Cell1" Runat="Server" 17.17. ColumnSpan="2" HorizontalAlign="Center">ColumnSpan="2" HorizontalAlign="Center">18.18. <ASP:Label Id="Label1" Runat="Server" ForeColor="Blue"<ASP:Label Id="Label1" Runat="Server" ForeColor="Blue"19.19. Text="Text=" 請填寫下列的資料請填寫下列的資料 "/>"/>20.20. </ASP:TableCell></ASP:TableCell>21.21. </ASP:TableRow></ASP:TableRow>22.22. 23.23. <ASP:TableRow Id="Row2" Runat="Server"><ASP:TableRow Id="Row2" Runat="Server">24.24. <ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right">25.25. <ASP:Label Id="Label2" Runat="Server" Text="<ASP:Label Id="Label2" Runat="Server" Text=" 姓名:姓名: "/>"/>26.26. </ASP:TableCell></ASP:TableCell>27.27. <ASP:TableCell Id="Cell3" Runat="Server"><ASP:TableCell Id="Cell3" Runat="Server">28.28. <ASP:TextBox Id="TextBox1" Runat="Server"/><ASP:TextBox Id="TextBox1" Runat="Server"/>29.29. <ASP:RequiredFieldValidator Id="Comp1" Runat="Server"<ASP:RequiredFieldValidator Id="Comp1" Runat="Server"30.30. ControlToValidate="TextBox1"ControlToValidate="TextBox1"31.31. Text="Text=" 不能空白不能空白 "/>"/>32.32. </ASP:TableCell></ASP:TableCell>33.33. </ASP:TableRow></ASP:TableRow>

Page 40: Ch07  表單欄位驗證控制項

4040

範例範例 6:6: 驗證身份證字號、電話、電子郵驗證身份證字號、電話、電子郵件件 (RegularExpressionValidator)(RegularExpressionValidator)

34.34. <ASP:TableRow Id="Row3" Runat="Server"><ASP:TableRow Id="Row3" Runat="Server">35.35. <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right">36.36. <ASP:Label Id="Label3" Runat="Server" Text="<ASP:Label Id="Label3" Runat="Server" Text=" 身份證字號:身份證字號: "/>"/>37.37. </ASP:TableCell></ASP:TableCell>38.38. <ASP:TableCell Id="Cell5" Runat="Server"><ASP:TableCell Id="Cell5" Runat="Server">39.39. <ASP:TextBox Id="TextBox2" Runat="Server"/><ASP:TextBox Id="TextBox2" Runat="Server"/>40.40. <ASP:RequiredFieldValidator Id="Comp2" Runat="Server"<ASP:RequiredFieldValidator Id="Comp2" Runat="Server"41.41. ControlToValidate="TextBox2"ControlToValidate="TextBox2"42.42. Text="Text=" 不能空白不能空白 "/>"/>43.43. <ASP:RegularExpressionValidator Id="Comp3" Runat="Server"<ASP:RegularExpressionValidator Id="Comp3" Runat="Server"44.44. ControlToValidate="TextBox2"ControlToValidate="TextBox2"45.45. ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}"ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}"46.46. ErrorMessage="ErrorMessage=" 身份證字號錯誤身份證字號錯誤 !"/>!"/>47.47. </ASP:TableCell></ASP:TableCell>48.48. </ASP:TableRow></ASP:TableRow>49.49. <ASP:TableRow Id="Row4" Runat="Server"><ASP:TableRow Id="Row4" Runat="Server">50.50. <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right">51.51. <ASP:Label Id="Label5" Runat="Server" Text="<ASP:Label Id="Label5" Runat="Server" Text=" 行動電話:行動電話: "/>"/>52.52. </ASP:TableCell></ASP:TableCell>53.53. <ASP:TableCell Id="Cell7" Runat="Server"><ASP:TableCell Id="Cell7" Runat="Server">54.54. <ASP:TextBox Id="TextBox3" Runat="Server"/><ASP:TextBox Id="TextBox3" Runat="Server"/>55.55. <ASP:RegularExpressionValidator Id="Comp4" Runat="Server"<ASP:RegularExpressionValidator Id="Comp4" Runat="Server"56.56. ControlToValidate="TextBox3"ControlToValidate="TextBox3"57.57. ValidationExpression="[0-9]{4}-[0-9]{6}"ValidationExpression="[0-9]{4}-[0-9]{6}"58.58. Text="Text=" 格式錯誤格式錯誤 "/>"/>59.59. <ASP:RequiredFieldValidator Id="Comp5" Runat="Server"<ASP:RequiredFieldValidator Id="Comp5" Runat="Server"60.60. ControlToValidate="TextBox3"ControlToValidate="TextBox3"61.61. Text="Text=" 不能空白不能空白 "/>"/>62.62. </ASP:TableCell></ASP:TableCell>63.63. </ASP:TableRow></ASP:TableRow>

Page 41: Ch07  表單欄位驗證控制項

4141

範例範例 6:6: 驗證身份證字號、電話、電子郵驗證身份證字號、電話、電子郵件件 (RegularExpressionValidator)(RegularExpressionValidator)

64.64. <ASP:TableRow Id="Row5" Runat="Server"><ASP:TableRow Id="Row5" Runat="Server">65.65. <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right">66.66. <ASP:Label Id="Label6" Runat="Server" Text="<ASP:Label Id="Label6" Runat="Server" Text=" 電子郵件:電子郵件: "/>"/>67.67. </ASP:TableCell></ASP:TableCell>68.68. <ASP:TableCell Id="Cell9" Runat="Server"><ASP:TableCell Id="Cell9" Runat="Server">69.69. <ASP:TextBox Id="TextBox4" Runat="Server"/><ASP:TextBox Id="TextBox4" Runat="Server"/>70.70. <ASP:RegularExpressionValidator Id="Comp6" Runat="Server"<ASP:RegularExpressionValidator Id="Comp6" Runat="Server"71.71. ControlToValidate="TextBox4"ControlToValidate="TextBox4"72.72. ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+"ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+"73.73. Text="Text=" 格式錯誤格式錯誤 "/>"/>74.74. <ASP:RequiredFieldValidator Id="Comp7" Runat="Server"<ASP:RequiredFieldValidator Id="Comp7" Runat="Server"75.75. ControlToValidate="TextBox4"ControlToValidate="TextBox4"76.76. Text="Text=" 不能空白不能空白 "/>"/>77.77. </ASP:TableCell></ASP:TableCell>78.78. </ASP:TableRow></ASP:TableRow>79.79. <ASP:TableRow Id="Row6" Runat="Server"><ASP:TableRow Id="Row6" Runat="Server">80.80. <ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right">81.81. <ASP:Button Id="Button1" Runat="Server" Text="<ASP:Button Id="Button1" Runat="Server" Text=" 確 定確 定 ""82.82. OnClick="Button1_Click"/>OnClick="Button1_Click"/>83.83. </ASP:TableCell> </ASP:TableCell> 84.84. </ASP:TableRow> </ASP:TableRow> 85.85. </ASP:Table></ASP:Table>86.86. </Form></Form>87.87. </Body></Body>88.88. </Html></Html>

Page 42: Ch07  表單欄位驗證控制項

4242

CustomValidatorCustomValidator 驗證控制項驗證控制項 -- 使用使用 CurstomValidatorCurstomValidator 驗證控制項可以使用自驗證控制項可以使用自

行撰寫的程序來驗證控制項的值,如下所行撰寫的程序來驗證控制項的值,如下所示:示:

<<asp:CustomValidator id="validCustom"asp:CustomValidator id="validCustom"

ControlToValidate="name" Display="Dynamic"ControlToValidate="name" Display="Dynamic"

OnServerValidate="Check_UserName"OnServerValidate="Check_UserName"

ErrorMessage="ErrorMessage=" 使用者稱格式錯誤使用者稱格式錯誤 !"!"

runat="Server"/>runat="Server"/>

Page 43: Ch07  表單欄位驗證控制項

4343

CustomValidatorCustomValidator 驗證控制項驗證控制項 -- 屬性與事屬性與事件件

當當 OnServerValidatorOnServerValidator 事件觸發後,事件處理程序,如下:事件觸發後,事件處理程序,如下:Sub Check_UserName(Sender As Object, e As Sub Check_UserName(Sender As Object, e As

ServerValidateEventArgs)ServerValidateEventArgs) If IsNumeric(e.Value) Then If IsNumeric(e.Value) Then e.IsValid = Falsee.IsValid = False ElseElse e.IsValid = Truee.IsValid = True End IfEnd IfEnd SubEnd Sub

屬性與事件 說明

ClientValidationFunction 設定和取得欄位驗證的程序或函數名稱

OnServerValidate 當需要伺服端驗證時,觸發此事件,也就是執行

設定的程序來檢查欄位內容

Page 44: Ch07  表單欄位驗證控制項

4444

ValidationSummaryValidationSummary 驗證控制項驗證控制項 -- 使使用用

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

Page 45: Ch07  表單欄位驗證控制項

4545

ValidationSummaryValidationSummary 驗證控制項驗證控制項 -- 屬性屬性

屬性 說明

HeaderText 設定和取得在摘要資料上方顯示的標題文字

DisplayMode 設定和取得摘要資料的顯示模式,屬性值可以是BulletList ( 項 目 符 號 ) 、 List ( 清 單 ) 和SingleParagraph(單一段落)

ShowMessageBox 是否使用訊息視窗來顯示摘要資訊,預設值 False

為不是,True為是

ShowSummary ValidationSummary 控制項是否在網頁中顯示,預

設值 True為是,False為不是

Page 46: Ch07  表單欄位驗證控制項

4646

範例範例 7:7: 顯示那些控制項未通過驗證顯示那些控制項未通過驗證1.1. <Html><Html>2.2. <head><head>3.3. <title><title> 驗證身份證字號、電話、電子郵件驗證身份證字號、電話、電子郵件

(ValidationSummary(ValidationSummary 控制項控制項 )</title>)</title>4.4. <Script Language="VB" Runat="Server"><Script Language="VB" Runat="Server">5.5. Sub Button1_Click(Sender As Object, e As EventArgs)Sub Button1_Click(Sender As Object, e As EventArgs)6.6. If Page.IsValid ThenIf Page.IsValid Then7.7. Label1.Text="Label1.Text=" 驗証成功驗証成功 ""8.8. End IfEnd If9.9. End SubEnd Sub10.10.</Script></Script>11.11.</head></head>

Page 47: Ch07  表單欄位驗證控制項

4747

範例範例 7:7: 顯示那些控制項未通過驗證顯示那些控制項未通過驗證12.12.<Body><Body>13.13.<Form Runat="Server"><Form Runat="Server">14.14.<ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue"><ASP:Table Id="Table1" Runat="Server" BorderWidth="3" BorderColor="LightBlue">15.15. <ASP:TableRow Id="Row1" Runat="Server"><ASP:TableRow Id="Row1" Runat="Server">16.16. <ASP:TableCell Id="Cell1" Runat="Server" <ASP:TableCell Id="Cell1" Runat="Server" 17.17. ColumnSpan="2" HorizontalAlign="Center">ColumnSpan="2" HorizontalAlign="Center">18.18. <ASP:Label Id="Label1" Runat="Server" ForeColor="Blue"<ASP:Label Id="Label1" Runat="Server" ForeColor="Blue"19.19. Text="Text=" 請填寫下列的資料請填寫下列的資料 "/>"/>20.20. </ASP:TableCell></ASP:TableCell>21.21. </ASP:TableRow></ASP:TableRow>22.22. <ASP:TableRow Id="Row2" Runat="Server"><ASP:TableRow Id="Row2" Runat="Server">23.23. <ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell2" Runat="Server" HorizontalAlign="Right">24.24. <ASP:Label Id="Label2" Runat="Server" Text="<ASP:Label Id="Label2" Runat="Server" Text=" 姓名:姓名: "/>"/>25.25. </ASP:TableCell></ASP:TableCell>26.26. <ASP:TableCell Id="Cell3" Runat="Server"><ASP:TableCell Id="Cell3" Runat="Server">27.27. <ASP:TextBox Id="TextBox1" Runat="Server"/><ASP:TextBox Id="TextBox1" Runat="Server"/>28.28. <ASP:RequiredFieldValidator Id="Comp1" Runat="Server"<ASP:RequiredFieldValidator Id="Comp1" Runat="Server"29.29. ControlToValidate="TextBox1"ControlToValidate="TextBox1"30.30. Text="*"Text="*"31.31. ErrorMessage="ErrorMessage=" 姓名不能空白姓名不能空白 "/>"/>32.32. </ASP:TableCell></ASP:TableCell>33.33. </ASP:TableRow></ASP:TableRow>

Page 48: Ch07  表單欄位驗證控制項

4848

範例範例 7:7: 顯示那些控制項未通過驗證顯示那些控制項未通過驗證34.34. <ASP:TableRow Id="Row3" Runat="Server"><ASP:TableRow Id="Row3" Runat="Server">35.35. <ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell4" Runat="Server" HorizontalAlign="Right">36.36. <ASP:Label Id="Label3" Runat="Server" Text="<ASP:Label Id="Label3" Runat="Server" Text=" 身份證字號:身份證字號: "/>"/>37.37. </ASP:TableCell></ASP:TableCell>38.38. <ASP:TableCell Id="Cell5" Runat="Server"><ASP:TableCell Id="Cell5" Runat="Server">39.39. <ASP:TextBox Id="TextBox2" Runat="Server"/><ASP:TextBox Id="TextBox2" Runat="Server"/>40.40. <ASP:RequiredFieldValidator Id="Comp2" Runat="Server"<ASP:RequiredFieldValidator Id="Comp2" Runat="Server"41.41. ControlToValidate="TextBox2"ControlToValidate="TextBox2"42.42. Text="*"Text="*"43.43. ErrorMessage="ErrorMessage=" 身份證字號不能空白身份證字號不能空白 "/>"/>44.44. <ASP:RegularExpressionValidator Id="Comp3" Runat="Server"<ASP:RegularExpressionValidator Id="Comp3" Runat="Server"45.45. ControlToValidate="TextBox2"ControlToValidate="TextBox2"46.46. ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}"ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}"47.47. Text="*"Text="*"48.48. ErrorMessage="ErrorMessage=" 身份證字號錯誤身份證字號錯誤 !"/>!"/>49.49. </ASP:TableCell></ASP:TableCell>50.50. </ASP:TableRow></ASP:TableRow>51.51. <ASP:TableRow Id="Row4" Runat="Server"><ASP:TableRow Id="Row4" Runat="Server">52.52. <ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell6" Runat="Server" HorizontalAlign="Right">53.53. <ASP:Label Id="Label5" Runat="Server" Text="<ASP:Label Id="Label5" Runat="Server" Text=" 行動電話:行動電話: "/>"/>54.54. </ASP:TableCell></ASP:TableCell>55.55. <ASP:TableCell Id="Cell7" Runat="Server"><ASP:TableCell Id="Cell7" Runat="Server">56.56. <ASP:TextBox Id="TextBox3" Runat="Server"/><ASP:TextBox Id="TextBox3" Runat="Server"/>57.57. <ASP:RegularExpressionValidator Id="Comp4" Runat="Server"<ASP:RegularExpressionValidator Id="Comp4" Runat="Server"58.58. ControlToValidate="TextBox3"ControlToValidate="TextBox3"59.59. ValidationExpression="[0-9]{4}-[0-9]{6}"ValidationExpression="[0-9]{4}-[0-9]{6}"60.60. Text="*"Text="*"61.61. ErrorMessage="ErrorMessage=" 行動電話格式錯誤行動電話格式錯誤 XXXX-XXXXXX"/>XXXX-XXXXXX"/>62.62. <ASP:RequiredFieldValidator Id="Comp5" Runat="Server"<ASP:RequiredFieldValidator Id="Comp5" Runat="Server"63.63. ControlToValidate="TextBox3"ControlToValidate="TextBox3"64.64. Text="*"Text="*"65.65. ErrorMessage="ErrorMessage=" 行動電話不能空白行動電話不能空白 "/>"/>66.66. </ASP:TableCell></ASP:TableCell>67.67. </ASP:TableRow></ASP:TableRow>

Page 49: Ch07  表單欄位驗證控制項

4949

範例範例 7:7: 顯示那些控制項未通過驗證顯示那些控制項未通過驗證68.68. <ASP:TableRow Id="Row5" Runat="Server"><ASP:TableRow Id="Row5" Runat="Server">69.69. <ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell8" Runat="Server" HorizontalAlign="Right">70.70. <ASP:Label Id="Label6" Runat="Server" Text="<ASP:Label Id="Label6" Runat="Server" Text=" 電子郵件:電子郵件: "/>"/>71.71. </ASP:TableCell></ASP:TableCell>72.72. <ASP:TableCell Id="Cell9" Runat="Server"><ASP:TableCell Id="Cell9" Runat="Server">73.73. <ASP:TextBox Id="TextBox4" Runat="Server"/><ASP:TextBox Id="TextBox4" Runat="Server"/>74.74. <ASP:RegularExpressionValidator Id="Comp6" Runat="Server"<ASP:RegularExpressionValidator Id="Comp6" Runat="Server"75.75. ControlToValidate="TextBox4"ControlToValidate="TextBox4"76.76. ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+"ValidationExpression="[a-zA-Z0-9]+@[.a-zA-Z0-9]+"77.77. Text="*"Text="*"78.78. ErrorMessage="ErrorMessage=" 電子郵件格式錯誤電子郵件格式錯誤 "/>"/>79.79. <ASP:RequiredFieldValidator Id="Comp7" Runat="Server"<ASP:RequiredFieldValidator Id="Comp7" Runat="Server"80.80. ControlToValidate="TextBox4"ControlToValidate="TextBox4"81.81. Text="*"Text="*"82.82. ErrorMessage="ErrorMessage=" 電子郵件不能空白電子郵件不能空白 "/>"/>83.83. </ASP:TableCell></ASP:TableCell>84.84. </ASP:TableRow></ASP:TableRow>85.85. 86.86. <ASP:TableRow Id="Row6" Runat="Server"><ASP:TableRow Id="Row6" Runat="Server">87.87. <ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right"><ASP:TableCell Id="Cell10" Runat="Server" HorizontalAlign="Right">88.88. <ASP:Button Id="Button1" Runat="Server" Text="<ASP:Button Id="Button1" Runat="Server" Text=" 確 定確 定 ""89.89. OnClick="Button1_Click"/>OnClick="Button1_Click"/>90.90. </ASP:TableCell> </ASP:TableCell> 91.91. </ASP:TableRow> </ASP:TableRow>

Page 50: Ch07  表單欄位驗證控制項

5050

範例範例 7:7: 顯示那些控制項未通過驗證顯示那些控制項未通過驗證92.92. <ASP:TableRow Id="Row7" Runat="Server"><ASP:TableRow Id="Row7" Runat="Server">93.93. <ASP:TableCell Id="Cell11" Runat="Server" ColumnSpan="2"><ASP:TableCell Id="Cell11" Runat="Server" ColumnSpan="2">94.94. <ASP:ValidationSummary Id="Comp8" Runat="Server"<ASP:ValidationSummary Id="Comp8" Runat="Server"95.95. HeaderText="* HeaderText="* 欄位發生以下的錯誤欄位發生以下的錯誤 :"/>:"/>96.96. </ASP:TableCell></ASP:TableCell>97.97. </ASP:TableRow></ASP:TableRow>98.98. 99.99.</ASP:Table></ASP:Table>100.100.</Form></Form>

101.101.</Body></Body>102.102.</Html></Html>

Page 51: Ch07  表單欄位驗證控制項

5151

豐富控制項豐富控制項 ASP.NETASP.NET 為了更豐富網頁上的呈現面,所特別提為了更豐富網頁上的呈現面,所特別提供的一些控制項供的一些控制項

豐富控制項豐富控制項 說明說明<asp:Calendar><asp:Calendar> 月曆月曆<asp:AdRotator<asp:AdRotator 廣告迴旋板廣告迴旋板

Page 52: Ch07  表單欄位驗證控制項

5252

範例8:製作月曆範例8:製作月曆1.1. <html><html>2.2. <body><body>3.3. <form runat="server"><form runat="server">4.4. <asp:Calendar id="C1" runat="server"><asp:Calendar id="C1" runat="server">5.5. <TitleStyle BackColor="Pink" /><TitleStyle BackColor="Pink" />6.6. <DayStyle BackColor="LightYellow" /><DayStyle BackColor="LightYellow" />7.7. <TodayDayStyle ForeColor="green" /><TodayDayStyle ForeColor="green" />8.8. <WeekendDayStyle BackColor="red" /><WeekendDayStyle BackColor="red" />9.9. <DayHeaderStyle BackColor="yellow" /><DayHeaderStyle BackColor="yellow" />10.10. <OtherMonthDayStyle ForeColor="LightGray" /><OtherMonthDayStyle ForeColor="LightGray" />11.11. </asp:Calendar></asp:Calendar>12.12. </form></form>13.13. </body></body>14.14.<html><html>

Page 53: Ch07  表單欄位驗證控制項

5353

範例9:廣告看板範例9:廣告看板 Ex08_09.aspxEx08_09.aspx1.1. <html><html>2.2. <body><body>3.3. <asp:AdRotator id="A1" <asp:AdRotator id="A1"

runat="server" AdvertisementFile runat="server" AdvertisementFile ="Ex08-09.xml" />="Ex08-09.xml" />

4.4. </body></body>5.5. <html><html>

Ex08-09.xmlEx08-09.xml1.1. <?xml version="1.0" encoding="utf-8" ?><?xml version="1.0" encoding="utf-8" ?>2.2. <Advertisements><Advertisements>3.3. <Ad><Ad>4.4. <ImageUrl>Ex08_09_01.gif</ImageUrl><ImageUrl>Ex08_09_01.gif</ImageUrl>5.5. <NavigateUrl>http://www.nkmu.edu.tw</NavigateUrl><NavigateUrl>http://www.nkmu.edu.tw</NavigateUrl>6.6. <AlternateText>nkmu</AlternateText><AlternateText>nkmu</AlternateText>7.7. <Impressions>1</Impressions><Impressions>1</Impressions>8.8. </Ad></Ad>9.9. <Ad><Ad>10.10. <ImageUrl>Ex08_09_02.gif</ImageUrl><ImageUrl>Ex08_09_02.gif</ImageUrl>11.11. <NavigateUrl>http://www.nkmu.edu.tw/campus/im <NavigateUrl>http://www.nkmu.edu.tw/campus/im

</NavigateUrl></NavigateUrl>12.12. <AlternateText>nkmu.mis</AlternateText><AlternateText>nkmu.mis</AlternateText>13.13. <Impressions>1</Impressions><Impressions>1</Impressions>14.14. </Ad></Ad>15.15. <Ad><Ad>16.16. <ImageUrl>Ex08_09_03.gif</ImageUrl><ImageUrl>Ex08_09_03.gif</ImageUrl>17.17. <NavigateUrl>http://mis2.nkmu.edu.tw/wangdaj <NavigateUrl>http://mis2.nkmu.edu.tw/wangdaj

</NavigateUrl></NavigateUrl>18.18. <AlternateText>wangdaj</AlternateText><AlternateText>wangdaj</AlternateText>19.19. <Impressions>1</Impressions><Impressions>1</Impressions>20.20. </Ad></Ad>21.21. </Advertisements></Advertisements>

Page 54: Ch07  表單欄位驗證控制項

5454

練習一練習一為左圖中的欄位加上驗為左圖中的欄位加上驗

證控制項證控制項

Page 55: Ch07  表單欄位驗證控制項

5555

練習二練習二 建立一個建立一個

CustomValidatorCustomValidator 控制項,控制項,檢查客戶端輸入的身份證檢查客戶端輸入的身份證字號是否合法字號是否合法

身份證字號計算規則:身份證字號計算規則: 身份證字號由一個英文字母身份證字號由一個英文字母+9個數字構成+9個數字構成

先將身份證字號的英文字母先將身份證字號的英文字母代換為數字編碼,如右表:代換為數字編碼,如右表:

將字母轉換成2碼後,身份將字母轉換成2碼後,身份證號變成11碼證號變成11碼

11碼分別乘以:11碼分別乘以:1,9,8,7,6,5,4,3,2,1,11,9,8,7,6,5,4,3,2,1,1

加總上述11組數字相乘後加總上述11組數字相乘後的結果,結果X的結果,結果X

X可被10整除,則表示輸X可被10整除,則表示輸入正確的身份證字號 入正確的身份證字號 

AA BB CC DD EE FF GG HH II JJ KK LL MM NN

1100

1111

1122

1133

1144

1155

1166

1177

3344

1188

1199

2200

2211

2222

OO PP QQ RR SS TT UU VV WW XX YY ZZ

3355

2233

2244

2255

2266

2277

2288

2299

3300

3311

3322

3333