asp.net 数据验证控件的使用实例

操作题请为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}

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值