asp.net 資料驗證控制元件的使用例項

asp.net 資料驗證控制元件的使用例項

操作題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}