ASP.NET 網頁製作教本 – 從基本語法學起 第 7 章 Server 控制元件 與資料驗證
ASP.NET 所提供的資料驗證器
7-1 資料驗證器之初體驗
不驗證資料
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>
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>
自己撰寫程式驗證資料
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>
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>
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 欄位都有輸入資料
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>
使用資料驗證器驗證資料
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>
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>
7-2 RangeValidator 與CompareValidator 資料驗證器
使用 RangeValidator 資料驗證器
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"
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>
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>
使用 CompareValidator 資料驗證器
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>
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>
動態設定比較的資料
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>
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>
7-3 ValidationSummary 資料驗證器
ValidationSummary 資料驗證器
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>
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>
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>
7-4 RegularExpressionValidator資料驗證器
初解 Regular Expression
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>
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>
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>
Regular Expression 綜合應用
Valid08.aspx Part I <Html> <Body bgcolor="White"> <H3>使用 RegularExpressionValidator, 綜合應用<Hr></H3> <Form runat="server"><Blockquote> 電子郵件：<asp:TextBox id="Email" runat="server"/> <asp:RegularExpressionValidator runat="server" ControlToValidate="Email" Text="(Email 應含有 @ 符號)" ValidationExpression=".{1,}@.{3,}" /><p>
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>
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>
Valid08.aspx Part IV <script Language="VB" runat="server"> Sub Button_Click(sender As Object, e As EventArgs) If IsValid Then Msg.Text = "電子郵件:" & Email.Text & "<br>" Msg.Text &= "電話號碼:" & Tel.Text & "<br>" Msg.Text &= "詳細地址:" & Addr.Text End If End Sub </script>
7-5 CustomValidator 資料驗證器
CustomValidator 資料驗證器
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>
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>
檢驗「身份證字號」欄位
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}" />
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>
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
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
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
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>
有關「身份證字號」驗證規則 身份證字號共有10個字元，假設我們將 其表示成： 其中第一個字元必須是英文字母，而此 一英文字母在驗證的規則中必須先轉換 成數字，轉換的規則如下表：
7-6 資料驗證器使用實務
一個輸入欄位使用 多個資料驗證器
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>
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>
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>
佔床或不佔床
割據網頁的情況
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>
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>
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>
Valid03c.aspx 測試網頁
瞭解 Client 端驗證資料的優點及問題 Valid02b.asp
在 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>