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

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

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

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

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 = "輸入姓名: "

控制項的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>

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

範例1:IsPostBack與AutoPostBack的比較
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 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的比較
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 Sub Sub Change_Name(S as Object, E as EventArgs) show.Text = name.Text & "你好!" </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>

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

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

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

RequiredFieldValidator驗證控制項-使用
<asp:RequiredFieldValidator id="validName" ControlToValidate="name" ErrorMessage="必須輸入使用者名稱!" runat="Server"/>

RequiredFieldValidator驗證控制項-屬性

RequiredFieldValidator驗證控制項-InitialValue屬性
<asp:RequiredFieldValidator id="validPass" ControlToValidate="pass" InitialValue="1234" ErrorMessage="必須輸入使用者密碼!" runat="Server"/> 驗證控制項要求TextBox控制項pass的值不可以是【1234】，可以是空白。

範例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>您未填寫註冊的 " Else Label5.Text+="<Br>您的註冊的是：" & TextBox3.Text End If Label5.Text="AAA" End Sub </Script> </head>

範例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:TableRow> <ASP:TableRow Id="Row2" Runat="Server"> <ASP:TableCell Id="Cell3" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label3" Runat="Server" Text="密碼："/> <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"/>

範例2:使用RequiredFieldValidator控制項測試是否有輸入值(續)
<ASP:TableRow Id="Row3" Runat="Server"> <ASP:TableCell Id="Cell5" Runat="Server" HorizontalAlign="Right"> <ASP:Label Id="Label4" Runat="Server" Text=" ："/> </ASP:TableCell> <ASP:TableCell Id="Cell6" Runat="Server"> <ASP:TextBox Id="TextBox3" Runat="Server"/> </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:Table> </Form> <ASP:Label Id="Label5" Runat="Server"/> </Body> </Html>

CompareValidator驗證控制項-使用
<asp:CompareValidator id="validComp" ControlToValidate="pass" ControlToCompare = "pass1“ Operator=“比較運算子” Type="String" Display="Dynamic" ErrorMessage="兩次輸入的密碼不同!" runat="Server"/>

CompareValidator驗證控制項-屬性

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

範例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>

<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: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 Id="Cell9" Runat="Server"> <asp:CompareValidator id="Comp1" runat="server" ControlToValidate="TextBox3" ControlToCompare="TextBox2" Type="String" Operator="Equal" Text="* 新密碼不符合"/> </asp:CompareValidator> </ASP:Table> </Form>

範例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 </Script> </head>

<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:Table> </Form> <ASP:Label Id="Label4" Runat="Server"/> </Body> </Html>

RangeValidator驗證控制項-使用
<asp:RangeValidator id="validRange" ControlToValidate="age" Display="Dynamic" Type="Integer" MinimumValue="21" MaximumValue="70" ErrorMessage="年齡的範圍是21 ~ 70!" runat="server"/>

RangeValidator驗證控制項-屬性

範例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+="要再加油囉！！" End If End Sub </Script> </head>

範例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: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 Id="Cell4" Runat="Server"> <ASP:RangeValidator Id="Comp1" Runat="Server" ControlToValidate="TextBox1" MinimumValue="0" MaximumValue="100" Type="Integer" Text="請輸入0~100之間的數字"/> </ASP:Table> </Form> <ASP:Label Id="Label2" Runat="Server"/> </Body> </Html> 輸入的值只可以是整數,所以70.5是不合法的,如果要讓70.5合法,必須設定Type=“Double”

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

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

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

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

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>

<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" ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}" ErrorMessage="身份證字號錯誤!"/> </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 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"

<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" Text="格式錯誤"/> <ASP:RequiredFieldValidator Id="Comp7" Runat="Server" Text="不能空白"/> </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:Table> </Form> </Body> </Html>

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

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

ValidationSummary驗證控制項-使用
<asp:ValidationSummary ID="validSummary" HeaderText="Web表單欄位的錯誤資料: " DisplayMode="BulletList“ ShowSummary=“True或False” ShowMessageBox=“True或False” runat="Server"/>

ValidationSummary驗證控制項-屬性

範例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>

範例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 Id="Cell3" Runat="Server"> <ASP:TextBox Id="TextBox1" Runat="Server"/> <ASP:RequiredFieldValidator Id="Comp1" Runat="Server" ControlToValidate="TextBox1" Text="*" ErrorMessage="姓名不能空白"/>

範例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" ValidationExpression="[a-zA-Z]{1}[12]{1,}[0-9]{8}" ErrorMessage="身份證字號錯誤!"/> </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 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}" ErrorMessage="行動電話格式錯誤XXXX-XXXXXX"/> <ASP:RequiredFieldValidator Id="Comp5" Runat="Server" ErrorMessage="行動電話不能空白"/>

<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" Text="*" ErrorMessage="電子郵件格式錯誤"/> <ASP:RequiredFieldValidator Id="Comp7" Runat="Server" ErrorMessage="電子郵件不能空白"/> </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 Id="Cell11" Runat="Server" ColumnSpan="2"> <ASP:ValidationSummary Id="Comp8" Runat="Server" HeaderText="* 欄位發生以下的錯誤:"/> </ASP:TableCell> </ASP:TableRow> </ASP:Table> </Form> </Body> </Html>

豐富控制項 ASP.NET為了更豐富網頁上的呈現面，所特別提供的一些控制項豐富控制項說明 <asp:Calendar> 月曆
<asp:AdRotator 廣告迴旋板

範例８：製作月曆 <html> <body> <form runat="server">
<asp:Calendar id="C1" runat="server"> <TitleStyle BackColor="Pink" /> <DayStyle BackColor="LightYellow" /> <TodayDayStyle ForeColor="green" /> <WeekendDayStyle BackColor="red" /> <DayHeaderStyle BackColor="yellow" /> <OtherMonthDayStyle ForeColor="LightGray" /> </asp:Calendar> </form> </body>

範例９：廣告看板 Ex08-09.xml Ex08_09.aspx <html> <body>
<?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>Ex08_09_01.gif</ImageUrl> <NavigateUrl> <AlternateText>nkmu</AlternateText> <Impressions>1</Impressions> </Ad> <ImageUrl>Ex08_09_02.gif</ImageUrl> <NavigateUrl> </NavigateUrl> <AlternateText>nkmu.mis</AlternateText> <ImageUrl>Ex08_09_03.gif</ImageUrl> <NavigateUrl> </NavigateUrl> <AlternateText>wangdaj</AlternateText> </Advertisements> Ex08_09.aspx <html> <body> <asp:AdRotator id="A1" runat="server" AdvertisementFile ="Ex08-09.xml" /> </body>

練習一為左圖中的欄位加上驗證控制項

練習二建立一個CustomValidator控制項，檢查客戶端輸入的身份證字號是否合法身份證字號計算規則：
身份證字號由一個英文字母＋９個數字構成先將身份證字號的英文字母代換為數字編碼，如右表：將字母轉換成２碼後，身份證號變成１１碼１１碼分別乘以：1,9,8,7,6,5,4,3,2,1,1 加總上述１１組數字相乘後的結果，結果ＸＸ可被１０整除，則表示輸入正確的身份證字號　 A B C D E F G H I J K L M N 10 11 12 13 14 15 16 17 34 18 19 20 21 22 O P Q R S T U V W X Y Z 35 23 24 25 26 27 28 29 30 31 32 33

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

Similar presentations

Presentation on theme: "Ch07 表單欄位驗證控制項網頁程式設計."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

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

Similar presentations

Presentation on theme: "Ch07 表單欄位驗證控制項 網頁程式設計."— Presentation transcript:

Similar presentations

About project

反馈

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

Presentation on theme: "Ch07 表單欄位驗證控制項網頁程式設計."— Presentation transcript: