asp.net 資料驗證控制元件的使用例項
阿新 • • 發佈：2019-01-05
操作題1 請為Zootopia 的居民，設計一個身份認證網站，使每位居民擁有合法身份。要求註冊頁面如下中至少包含下圖中的相關資訊，並實現相應的驗證功能。
[要求]：
1. 網站包含登入頁面Login.aspx和註冊頁面Register.aspx；
2. 登入頁面，自行設計；
3. 註冊頁面如下中至少包含下圖中的相關資訊，並實現相應的驗證功能，佈局自行設計；
4. 使用者名稱除了非空外，還要求驗證：必須輸入6~12個數字或大小寫英文字母；使用者名稱是否已經存在；
5. 請匯入合適的身份圖片，見image資料夾；
6. 出身年份範圍：1988~1998
7. 不能使用登入控制元件；
Register.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Register.aspx.cs" Inherits="Register" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> function Check(source,args) { //alert(source);source=CustomValidator1,為驗證控制元件 //alert(args); var obj=document.getElementById("TextBox1"); if(obj.value=="123456") { args.IsValid = false; } else { args.IsValid=true; } } </script> <style type="text/css"> .auto-style1 { text-align: justify; } </style> </head> <body> <form id="form1" runat="server"> <p style="color: #0066FF;" class="auto-style1"> 使用者註冊</p> <p class="auto-style1"> 使用者名稱： <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="必須輸入使用者名稱" ForeColor="Red"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="必須輸入6~12個數字或大小寫英文字母" ForeColor="Red" ValidationExpression="[0-9]{6,12}|[A-Za-z]{6,12}"></asp:RegularExpressionValidator> </p> <p class="auto-style1"> <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="Check" ControlToValidate="TextBox1" ErrorMessage="使用者名稱已存在" ForeColor="Red"></asp:CustomValidator> </p> <p class="auto-style1"> 頭像： <asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True"> </asp:DropDownList> </p> <p class="auto-style1"> <asp:Image ID="Image1" runat="server" Height="102px" Width="104px" /> </p> <p class="auto-style1"> 出生日期：<asp:DropDownList ID="DropDownList2" runat="server"> </asp:DropDownList> 年<asp:DropDownList ID="DropDownList3" runat="server"> </asp:DropDownList> 月<asp:DropDownList ID="DropDownList4" runat="server"> </asp:DropDownList> 日</p> <p class="auto-style1"> 使用者密碼：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" ErrorMessage="密碼不能為空" ForeColor="Red"></asp:RequiredFieldValidator> </p> <p class="auto-style1"> 確認密碼：<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox2" ControlToValidate="TextBox3" ErrorMessage="重複密碼有誤" ForeColor="Red"></asp:CompareValidator> </p> <p class="auto-style1"> 真實姓名：<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox4" ErrorMessage="真實姓名不能為空" ForeColor="Red"></asp:RequiredFieldValidator> </p> <p class="auto-style1"> 性別 <asp:DropDownList ID="DropDownList5" runat="server"> <asp:ListItem>男</asp:ListItem> <asp:ListItem>女</asp:ListItem> </asp:DropDownList> </p> <p class="auto-style1"> 聯絡電話：<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox> </p> <p class="auto-style1"> 手機： <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox> </p> <p class="auto-style1"> QQ號碼： <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox> </p> <p class="auto-style1"> Email： <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox8" ErrorMessage="必須輸入郵箱地址" ForeColor="Red"></asp:RequiredFieldValidator> </p> <p class="auto-style1"> 個人愛好 <asp:CheckBox ID="CheckBox1" runat="server" Text="音樂" /> </p> <p class="auto-style1"> <asp:CheckBox ID="CheckBox2" runat="server" Text="運動" /> </p> <p class="auto-style1"> <asp:CheckBox ID="CheckBox3" runat="server" Text="閱讀" /> </p> <p class="auto-style1"> <asp:Button ID="Button1" runat="server" Text="提交" /> <asp:Button ID="Button2" runat="server" Text="取消" /> </p> <p style="text-align: left"> </p> </form> </body> </html>
Register.aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Collections; public partial class Register : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ArrayList ar = new ArrayList(); for (int i = 1; i <= 18; i++) { ar.Add("頭像" + i); } this.DropDownList1.DataSource = ar; this.DropDownList1.DataBind(); DropDownList1.Items.Insert(0, "請選擇頭像……"); ArrayList year = new ArrayList(); for (int i = 1989; i <= 1998; i++) { year.Add(i); } this.DropDownList2.DataSource = year; this.DropDownList2.DataBind(); DropDownList2.Items.Insert(0, "1988"); ArrayList yue = new ArrayList(); for (int i = 2; i <= 12; i++) { yue.Add(i); } this.DropDownList3.DataSource = yue; this.DropDownList3.DataBind(); DropDownList3.Items.Insert(0, "1"); ArrayList day = new ArrayList(); for (int i = 2; i <= 31; i++) { day.Add(i); } this.DropDownList4.DataSource = day; this.DropDownList4.DataBind(); DropDownList4.Items.Insert(0, "1"); } //Image1.ImageUrl = "~/image/1.jpg"; } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { int m = DropDownList1.SelectedIndex; for (int i = 1; i <= 18; i++) { if (m == i) { Image1.ImageUrl= "~/image/"+i+".jpg"; } } } }
思考題：
驗證控制元件列表和執行的驗證結果由哪個物件維護？請給出驗證成功彈出訊息框的實現程式碼。
protected void Button1_Click(object sender, EventArgs e)
{
if (RequiredFieldValidator1.IsValid == true)
{
Response.Write("<script>alert('輸入合法');</script");
}
}注意：不同資料驗證控制元件的使用方法，資料控制元件的屬性。
DropdownList控制元件啟用AutoPostBack.
必須輸入6~12個數字或大小寫英文字母的正則表示式：[0-9A-Za-z]{6,12}