Download presentation
Presentation is loading. Please wait.
1
ASP.NET 網頁製作教本 – 從基本語法學起
第 7 章 Server 控制元件 與資料驗證
2
ASP.NET 所提供的資料驗證器
3
7-1 資料驗證器之初體驗
4
不驗證資料
5
ValidNo.aspx Part I <Html> <Body bgcolor="White">
<H3>請輸入以下資料:<Hr></H3> <Form runat="server"> 姓名:<asp:TextBox id="Name" runat="server"/><p> 電話:<asp:TextBox id="Tel" runat="server"/><p> 地址:<asp:TextBox id="Addr" runat="server" Size="40" /><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> </Form> <HR><asp:Label runat="server" id="Msg" /> </Body> </Html>
6
ValidNo.aspx Part II <script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs) Msg.Text = "您輸入的資料如下:<br>" Msg.Text &= "姓名: " & Name.Text & "<br>" Msg.Text &= "電話: " & Tel.Text & "<br>" Msg.Text &= "地址: " & Addr.Text & "<br>" End Sub </script>
7
自己撰寫程式驗證資料
8
Valid01.aspx Part I <Html> <Body bgcolor="White">
<H3>請輸入以下資料:<Hr></H3> <Form runat="server"> 姓名:<asp:TextBox id="Name" runat="server"/> <asp:Label id="Label1" runat="server" ForeColor="red"/><p> 電話:<asp:TextBox id="Tel" runat="server"/> <asp:Label id="Label2" runat="server" ForeColor="red"/><p>
9
Valid01.aspx Part II 地址:<asp:TextBox id="Addr" runat="server" Size="40" /> <asp:Label id="Label3" runat="server" ForeColor="red"/><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> </Form> <HR><asp:Label runat="server" id="Msg" /> </Body> </Html>
10
Valid01.aspx Part III <script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs) ' 先清除 Label1~Label3 所顯示的 (必要欄位) Label1.Text = "" Label2.Text = "" Label3.Text = "" ' 確定 Name、Tel、Addr 欄位都有輸入資料
11
Valid01.aspx Part IV If Name.Text <> "" And Tel.Text <> "" And _ Addr.Text <> "" Then Msg.Text = "您輸入的資料如下:<br>" Msg.Text &= "姓名: " & Name.Text & "<br>" Msg.Text &= "電話: " & Tel.Text & "<br>" Msg.Text &= "地址: " & Addr.Text & "<br>" Else ' 對於沒有輸入資料的欄位,在該欄位後面顯示 (必要欄位) If Name.Text = "" Then Label1.Text = "(必要欄位)" If Tel.Text = "" Then Label2.Text = "(必要欄位)" If Addr.Text = "" Then Label3.Text = "(必要欄位)" End If End Sub </script>
12
使用資料驗證器驗證資料
13
Valid02.aspx Part I <Html> <Body bgcolor="White">
<H3>請輸入以下資料:<Hr></H3> <Form runat="server"> 姓名:<asp:TextBox id="Name" runat="server"/> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Name" /><p> 電話:<asp:TextBox id="Tel" runat="server"/> ControlToValidate="Tel" /><p> 地址:<asp:TextBox id="Addr" runat="server" Size="40" /> ControlToValidate="Addr" /><p>
14
Valid02.aspx Part II <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> </Form> <HR><asp:Label runat="server" id="Msg" /> </Body> </Html> <script Language="VB" runat="server"> Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then ' 表示所有被驗證的欄位均通過驗證 Msg.Text = "您輸入的資料如下:<br>" Msg.Text &= "姓名: " & Name.Text & "<br>" Msg.Text &= "電話: " & Tel.Text & "<br>" Msg.Text &= "地址: " & Addr.Text & "<br>" End If End Sub </script>
15
7-2 RangeValidator 與CompareValidator 資料驗證器
16
使用 RangeValidator 資料驗證器
17
Valid03.aspx Part I <Html> <Body bgcolor="White">
<H3>使用 RangeValidator<Hr></H3> <Form runat="server"><Blockquote> 國文:<asp:TextBox id="Chinese" runat="server"/> <asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="Chinese" Type="Integer" MaximumValue="100" MinimumValue="0" /><p> 英文:<asp:TextBox id="English" runat="server"/> ControlToValidate="English" Type="Integer"
18
Valid03.aspx Part II 數學:<asp:TextBox id="Math" runat="server"/>
<asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="Math" Type="Integer" MaximumValue="100" MinimumValue="0" /><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /><p> </Blockquote></Form> <Hr><asp:Label runat="server" id="Msg" /> </Body> </Html>
19
Valid03.aspx Part III <script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then Dim Total Total = Val(Chinese.Text) + Val(English.Text) + Val(Math.Text) Msg.Text = "平均分數 = " & Total / 3 End If End Sub </script>
20
使用 CompareValidator 資料驗證器
21
Valid04.aspx Part I <Html> <Body bgcolor="White">
<H3>使用 CompareValidator<Hr></H3> <Form runat="server"><Blockquote> 彩券張數:<asp:TextBox id="Count" runat="server"/> <asp:CompareValidator runat="server" Text="(最少一張)" ControlToValidate="Count" Type="Integer" ValueToCompare="1" Operator="GreaterThanEqual" /><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> </Blockquote></Form> <Hr><asp:Label runat="server" id="Msg" /> </Body> </Html>
22
Valid04.aspx Part II <script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then Msg.Text = "您購買 " & Count.Text & "張, 祝您中獎!" End If End Sub </script>
23
動態設定比較的資料
24
Valid05.aspx Part I <Html> <Body bgcolor="White">
<H3>請輸入購票日期<Hr></H3> <Form runat="server"><Blockquote> 日期:<asp:TextBox id="TicketDate" runat="server"/> <asp:RangeValidator runat="server" Text="(限明日至七日內)" id="Valid1" ControlToValidate="TicketDate" Type="Date"/> <p><asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> <p> </Blockquote> <Hr><asp:Label runat="server" id="Msg" /> </Form> </Body> </Html>
25
Valid05.aspx Part II <script Language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs) Valid1.MinimumValue = DateAdd( "d", 1, DateTime.Today ) Valid1.MaximumValue = DateAdd( "d", 7, DateTime.Today ) End Sub Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then Msg.Text = "購買日期: " & TicketDate.Text End If </script>
26
7-3 ValidationSummary 資料驗證器
27
ValidationSummary 資料驗證器
28
Valid06.aspx Part I <Html> <Body bgcolor="White">
<H3>請輸入以下資料:<Hr></H3> <Form runat="server"> 姓名:<asp:TextBox id="Name" runat="server"/> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Name" ErrorMessage="姓名." /><p> 電話:<asp:TextBox id="Tel" runat="server"/> ControlToValidate="Tel" ErrorMessage="電話." /><p>
29
Valid06.aspx Part II 地址:<asp:TextBox id="Addr" runat="server" Size="40" /> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Addr" ErrorMessage="地址." /><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> <HR><asp:ValidationSummary runat="server" HeaderText="必須輸入的欄位還有:" DisplayMode="BulletList" /> </Form> <asp:Label runat="server" id="Msg" /> </Body> </Html>
30
Valid06.aspx Part III <script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then ' 表示所有被驗證的欄位均通過驗證 Msg.Text = "您輸入的資料如下:<br>" Msg.Text &= "姓名: " & Name.Text & "<br>" Msg.Text &= "電話: " & Tel.Text & "<br>" Msg.Text &= "地址: " & Addr.Text & "<br>" End If End Sub </script>
31
7-4 RegularExpressionValidator資料驗證器
32
初解 Regular Expression
33
Valid07.aspx Part I <Html> <Body bgcolor="White">
<H3>使用 RegularExpressionValidator<Hr></H3> <Form runat="server"><Blockquote> 會員帳號:<asp:TextBox id="UserID" runat="server"/> <asp:RegularExpressionValidator runat="server" ControlToValidate="UserID" Text="(請輸入 4-8 位英文)" ValidationExpression="[a-zA-Z]{4,8}" /><p>
34
Valid07.aspx Part II 郵遞區號:<asp:TextBox id="ZipCode" runat="server"/> <asp:RegularExpressionValidator runat="server" ControlToValidate="ZipCode" Text="(請輸入 3 位數字)" ValidationExpression="[0-9]{3}" /><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> </Blockquote></Form> <Hr><asp:Label runat="server" id="Msg" /> </body> </html>
35
Valid07.aspx Part III <script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then Msg.Text = "會員帳號: " & UserID.Text & "<br>" Msg.Text &= "郵遞區號: " & ZipCode.Text End If End Sub </script>
36
Regular Expression 綜合應用
37
Valid08.aspx Part I <Html> <Body bgcolor="White">
<H3>使用 RegularExpressionValidator, 綜合應用<Hr></H3> <Form runat="server"><Blockquote> 電子郵件:<asp:TextBox id=" " runat="server"/> <asp:RegularExpressionValidator runat="server" ControlToValidate=" " Text="( 符號)" /><p>
38
Valid08.aspx Part II 電話號碼:<asp:TextBox id="Tel" runat="server"/>
<asp:RegularExpressionValidator runat="server" ControlToValidate="Tel" Text="(XX)XXXX-XXXX, (XX)XXX-XXXX, (XXX)XXX-XXXX, (XXX)XX-XXXX" ValidationExpression="\([0-9]{2,3}\)[0-9]{2,4}-[0-9]{4}" /><p>
39
Valid08.aspx Part III 詳細地址:<asp:TextBox Size=60 id="Addr" runat="server"/> <asp:RegularExpressionValidator runat="server" ControlToValidate="Addr" Text="(必須含有 '市鎮鄉'、'路街道'、'號' 或 '郵政'、'信箱')" ValidationExpression="(.{1,}(市|鎮|鄉).{1,}(路|街|道).{1,}號.{0,})|(.{1,}郵政.{1,}信箱)" /><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> </Blockquote></Form> <Hr><asp:Label runat="server" id="Msg" /> </Body> </Html>
40
Valid08.aspx Part IV <script Language="VB" runat="server">
Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then Msg.Text = "電子郵件:" & .Text & "<br>" Msg.Text &= "電話號碼:" & Tel.Text & "<br>" Msg.Text &= "詳細地址:" & Addr.Text End If End Sub </script>
41
7-5 CustomValidator 資料驗證器
42
CustomValidator 資料驗證器
43
Valid09.aspx Part I <Html> <Body bgcolor="White">
<H3>使用 CustomValidator<Hr></H3> <Form runat="server"><Blockquote> 請輸入一偶數:<asp:TextBox id="Data" runat="server"/> <asp:RegularExpressionValidator runat="server" ControlToValidate="Data" Text="(請輸入數字)" ValidationExpression="[\-0-9]{1,}" /> <asp:CustomValidator runat="server" ControlToValidate="Data" Text="(這不是偶數)" OnServerValidate="ServerValidate" /><p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /><p> </Blockquote></Form> <Hr></body> </html>
44
Valid09.aspx Part II <script Language="VB" runat="server">
Sub ServerValidate(sender As Object, args As ServerValidateEventArgs) If CLng(args.Value) mod 2 = 0 Then args.IsValid = True Else args.IsValid = False End If End Sub Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then </script>
45
檢驗「身份證字號」欄位
46
Valid10.aspx Part I <Html> <Body bgcolor="White">
<H3>使用 CustomValidator, 檢驗「身份證字號」<Hr></H3> <Form runat="server"><Blockquote> 身份證字號:<asp:TextBox id="PersonID" runat="server"/> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="PersonID" /> <asp:RegularExpressionValidator runat="server" ControlToValidate="PersonID" Text="(≠10位數)" ValidationExpression="[a-zA-Z]{1}[0-9]{9}" />
47
Valid10.aspx Part II <asp:CustomValidator runat="server"
ControlToValidate="PersonID" Text="(身分證字號錯誤!)" OnServerValidate="ValidateID" /> <p> <asp:Button runat="server" Text="輸入" OnClick="Button_Click" /> </Blockquote></Form> <Hr><asp:Label runat="server" id="Msg" /> </Body> </Html>
48
Valid10.aspx Part III <script Language="VB" runat="server">
Sub ValidateID(s As Object, args As ServerValidateEventArgs) Dim 英文字母 = "ABCDEFGHJKLMNPQRSTUVWXYZIO" Dim 英文字母十位數() = {0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, _ 2, 2, 2, 2, 2, 2, 2, 2, 3, 4, 4, 3, 3, 3} Dim 英文字母個位數() = {0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, _ 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5} Dim 檢查碼() = {1, 9, 8, 7, 6, 5, 4, 3, 2, 1, 1} Dim I, pos, 總和 As Integer
49
Valid10.aspx Part IV args.IsValid = False ' 檢驗長度是否等於 10
If Len(args.Value) <> 10 Then Exit Sub ' 檢驗字元 2~10 是否為數字 For I = 2 To 10 ' 從第2個字元到第10個字元 If Not (Mid(args.Value, I, 1) >= "0" And _ Mid(args.Value, I, 1) <= "9") Then Exit Sub Next pos = InStr(英文字母, UCase(Left(args.Value, 1))) ' 檢驗第一個字元 If pos <= 0 Then Exit Sub
50
Valid10.aspx Part V ' 計算 (A1的十位數 + A1的個位數 * 9 + A2 * 8 + A3 * 7 + A4 * 6 + ' A5 * 5 + A6 * 4 + A7 * 3 + A8 * 2 + A9 * 1 + A10 * 1) 總和 = 英文字母十位數(pos) * 檢查碼(0) 總和 = 總和 + 英文字母個位數(pos) * 檢查碼(1) For I = 2 To 10 總和 = 總和 + Val(Mid(args.Value, I, 1)) * 檢查碼(I) Next
51
Valid10.aspx Part VI ' 是否整除 If 總和 Mod 10 = 0 Then args.IsValid = True
End Sub Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then Msg.Text = "身份證字號正確!" End If </script>
52
有關「身份證字號」驗證規則 身份證字號共有10個字元,假設我們將 其表示成:
其中第一個字元必須是英文字母,而此 一英文字母在驗證的規則中必須先轉換 成數字,轉換的規則如下表:
53
7-6 資料驗證器使用實務
54
一個輸入欄位使用 多個資料驗證器
55
Valid03b.asp 節錄 Part I 國文:<asp:TextBox id="Chinese" runat="server"/> <asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="Chinese" Type="Integer" MaximumValue="100" MinimumValue="0" /> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Chinese" /><p>
56
Valid03b.asp 節錄 Part II 英文:<asp:TextBox id="English" runat="server"/> <asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="English" Type="Integer" MaximumValue="100" MinimumValue="0" /> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="English" /><p>
57
Valid03b.asp 節錄 Part III 數學:<asp:TextBox id="Math" runat="server"/> <asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="Math" Type="Integer" MaximumValue="100" MinimumValue="0" /> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Math" /><p>
58
佔床或不佔床
59
割據網頁的情況
60
Valid03c.aspx 節錄 Part I 國文:<asp:TextBox id="Chinese" runat="server"/> <asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="Chinese" Type="Integer" MaximumValue="100" MinimumValue="0" Display="Dynamic" /> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Chinese" Display="Dynamic" /><p>
61
Valid03c.aspx 節錄 Part II 英文:<asp:TextBox id="English" runat="server"/> <asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="English" Type="Integer" MaximumValue="100" MinimumValue="0" Display="Dynamic" /> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="English" Display="Dynamic" /><p>
62
Valid03c.aspx 節錄 Part III 數學:<asp:TextBox id="Math" runat="server"/> <asp:RangeValidator runat="server" Text="(有效數值: 0~100)" ControlToValidate="Math" Type="Integer" MaximumValue="100" MinimumValue="0" Display="Dynamic" /> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Math" Display="Dynamic" /><p>
63
Valid03c.aspx 測試網頁
64
瞭解 Client 端驗證資料的優點及問題 Valid02b.asp
65
在 Server 端驗證資料 節錄 Valid02c.aspx
姓名:<asp:TextBox id="Name" runat="server"/> <asp:RequiredFieldValidator runat="server" Text="(必要欄位)" ControlToValidate="Name" EnableClientScript="False"/><p> 電話:<asp:TextBox id="Tel" runat="server"/> ControlToValidate="Tel" EnableClientScript="False" /><p> 地址:<asp:TextBox id="Addr" runat="server" Size="40" /> ControlToValidate="Addr" EnableClientScript="False" /><p>
Similar presentations