Presentation is loading. Please wait.

Presentation is loading. Please wait.

ASP.NET 網頁製作教本 – 從基本語法學起

Similar presentations


Presentation on theme: "ASP.NET 網頁製作教本 – 從基本語法學起"— Presentation transcript:

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>


Download ppt "ASP.NET 網頁製作教本 – 從基本語法學起"

Similar presentations


Ads by Google