ASP.NET实现简单用户注册页面

注:主要通过用户注册页面的编写掌握.net中验证控件的使用,没有编写button按钮的点击事件代码。

要求

设计实现一个用户注册页面,并使用验证控件对用户输入的内容进行验证,注册信息包括:用户名、密码、确认密码、性别、邮箱、出生日期、毕业日期、身份证号、手机号。具体要求如下:
(1)用户名不能为空,必须以字母开头,长度在6-9位之间;
(2)密码及确定密码不能为空,密码长度必须是6位,并且能判断密码与确定密码是否一致;
(3)性别为组合框控件,不能为空,选项为:请选择性别、男、女;
(4)邮箱为选填内容,必须符合邮箱格式;
(5)出生日期与毕业日期为选填内容,进行日期格式验证,出生日期要小于当前日期,毕业日期要大于出生日期,小于等于当前日期;
(6)身份证号为选填内容,进行正则表达式验证;
(7)手机号为选填内容,进行正则表达式验证。

设计页面

1.设计页面如下图所示:
在这里插入图片描述
2、设计实现功能一:用户名不能为空,必须以字母开头,长度在6-9位之间。
(1)添加非空验证控件rfvusername、正则表达式验证控件revusername。
(2)具体编码设计如下:

<td class="auto-style3">用户名:</td>
<td class="auto-style5">
<asp:TextBox ID="username" runat="server" Width="149px" Height="19px"></asp:TextBox>
</td>
<td class="auto-style2">
<asp:RequiredFieldValidator ID="rfvusername" runat="server" ControlToValidate="username" ErrorMessage="用户名不能为空" SetFocusOnError="True" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revusername" runat="server" ControlToValidate="username" ErrorMessage="必须以字母开头,长度6-9位" SetFocusOnError="True" ValidationExpression="[a-zA-Z]\w{5,8}" Display="Dynamic"></asp:RegularExpressionValidator>
</td>

3、设计实现功能二:密码及确定密码不能为空,密码长度必须是6位,并且能判断密码与确定密码是否一致。
(1)添加非空验证控件refpassword1、正则表达式验证控件revpassword1。
(2)具体编码设计如下:

<td class="auto-style4">密码:</td>
<td class="auto-style6">
<asp:TextBox ID="password1" runat="server" Width="149px" Height="19px" TextMode="Password"></asp:TextBox>
</td>
<td class="auto-style17">
<asp:RequiredFieldValidator ID="refpassword1" runat="server" ControlToValidate="password1" ErrorMessage="密码不能为空" SetFocusOnError="True" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revpassword1" runat="server" ControlToValidate="password1" ErrorMessage="密码长度必须是6位" SetFocusOnError="True" ValidationExpression=".{6}" Display="Dynamic"></asp:RegularExpressionValidator>
</td>
<td class="auto-style4">确认密码:</td>
<td class="auto-style6">
<asp:TextBox ID="password2" runat="server" Width="149px" Height="19px" TextMode="Password"></asp:TextBox>
</td>
<td class="auto-style17">
<asp:RequiredFieldValidator ID="refpassword2" runat="server" ControlToValidate="password2" ErrorMessage="确定密码不能为空" SetFocusOnError="True" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revpassword2" runat="server" ControlToValidate="password2" ErrorMessage="确认密码长度为6位" SetFocusOnError="True" ValidationExpression=".{6}" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:CompareValidator ID="cvpassword" runat="server" ControlToCompare="password1" ControlToValidate="password2" ErrorMessage="确定密码与密码不一致" SetFocusOnError="True" Display="Dynamic"></asp:CompareValidator>
</td>

4、设计实现功能三:性别为组合框控件,不能为空,选项为:请选择性别、男、女。
(1)添加非空验证控件rfvsex。
(2)具体编码设计如下:

 <td class="auto-style8">
 <p class="MsoNormal" style="text-align: right">
 <span style="mso-spacerun:'yes';font-family:宋体;mso-hansi-font-family:'Courier New';
font-size:10.5000pt;mso-font-kerning:1.0000pt;"><font face="宋体" style="text-align: right">性别:</font></span></p>
 </td>
 <td class="auto-style9">
 <asp:DropDownList ID="sex" runat="server" Height="28px" Width="160px">
 <asp:ListItem>请选择性别</asp:ListItem>
 <asp:ListItem></asp:ListItem>
 <asp:ListItem></asp:ListItem>
 </asp:DropDownList>
 </td>
 <td class="auto-style10">
 <asp:RequiredFieldValidator ID="rfvsex" runat="server" ControlToValidate="sex" ErrorMessage="请选择性别" InitialValue="请选择性别" SetFocusOnError="True"></asp:RequiredFieldValidator>
 </td>

5、设计实现功能四:邮箱为选填内容,必须符合邮箱格式。
(1)添加正则表达式验证控件revemail。
(2)具体编码设计如下:

<td class="auto-style18"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">邮箱:</font></span></td>
<td class="auto-style19">
<asp:TextBox ID="email" runat="server" Width="149px" Height="19px"></asp:TextBox>
</td>
<td class="auto-style20">
<asp:RegularExpressionValidator ID="revemail" runat="server" ControlToValidate="email" ErrorMessage="邮箱格式不正确" SetFocusOnError="True" ValidationExpression="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></asp:RegularExpressionValidator>
</td>

6、设计实现功能五:出生日期与毕业日期为选填内容,进行日期格式验证,出生日期要小于当前日期,毕业日期要大于出生日期,小于等于当前日期。
(1)添加正则表达式验证控件revdbirthday、添加范围验证控件revbirthday、添加正则表达式验证控件revgraduateday、添加数据比较验证控件cvgraduateday、添加范围验证控件rangraduateday1,在页面加载事件中设置控件revbirthday和rangraduateday1的最大值为当前日期。
(2)具体编码设计如下:

<td class="auto-style4"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">出生日期:</font></span></td>
<td class="auto-style6">
<asp:TextBox ID="birthday" runat="server" Width="149px" Height="19px"></asp:TextBox>
</td>
<td class="auto-style17">
<asp:RegularExpressionValidator ID="revdbirthday" runat="server" ControlToValidate="birthday" ErrorMessage="日期格式不正确" SetFocusOnError="True" ValidationExpression="^\d{4}-\d{1,2}-\d{1,2}" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:RangeValidator ID="revbirthday" runat="server" ControlToValidate="birthday" ErrorMessage="出生日期应小于当前日期" SetFocusOnError="True" Type="Date" Display="Dynamic" MinimumValue="1900-1-1"></asp:RangeValidator>
</td>

<td class="auto-style8"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">毕业日期:</font></span></td>
<td class="auto-style9">
<asp:TextBox ID="graduateday" runat="server" Width="149px" Height="19px"></asp:TextBox>
</td>
<td class="auto-style10">
<asp:RegularExpressionValidator ID="revgraduateday" runat="server" ControlToValidate="graduateday" ErrorMessage="日期格式不正确" SetFocusOnError="True" Display="Dynamic" ValidationExpression="^\d{4}-\d{1,2}-\d{1,2}"></asp:RegularExpressionValidator>
<asp:CompareValidator ID="cvgraduateday" runat="server" ControlToCompare="birthday" ControlToValidate="graduateday" Display="Dynamic" ErrorMessage="毕业日期应大于出生日期" Operator="GreaterThan" SetFocusOnError="True" Type="Date"></asp:CompareValidator>
<asp:RangeValidator ID="rangraduateday1" runat="server" ControlToValidate="graduateday" ErrorMessage="毕业日期应小于当前日期" Type="Date" Display="Dynamic" MinimumValue="1900-1-1"></asp:RangeValidator>
</td>
  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) {
            revbirthday.MaximumValue = DateTime.Now.ToShortDateString();
            rangraduateday1.MaximumValue = DateTime.Now.ToShortDateString();
        }
    }

7、设计实现功能六:身份证号为选填内容,进行正则表达式验证。
(1)添加正则表达式验证控件revid。
(2)具体编码设计如下:

<td class="auto-style11"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">身份证号:</font></span></td>
<td class="auto-style12">
<asp:TextBox ID="id" runat="server" Width="149px" Height="19px"></asp:TextBox>
</td>
<td class="auto-style13">
<asp:RegularExpressionValidator ID="revid" runat="server" ControlToValidate="id" ErrorMessage="身份证号格式不正确" SetFocusOnError="True" ValidationExpression="\d{17}[\d|X]|\d{15}"></asp:RegularExpressionValidator>
</td>

8、设计实现功能七:手机号为选填内容,进行正则表达式验证。
(1)添加正则表达式验证控件revphone。
(2)具体编码设计如下:

<td class="auto-style18"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">手机号:</font></span></td>
<td class="auto-style19">
<asp:TextBox ID="phone" runat="server" Width="149px" Height="19px"></asp:TextBox>
</td>
<td class="auto-style20">
<asp:RegularExpressionValidator ID="revphone" runat="server" ControlToValidate="phone" ErrorMessage="手机号格式不正确" SetFocusOnError="True" ValidationExpression="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"></asp:RegularExpressionValidator>
</td>

9、系统部分测试页面如下图所示:
在这里插入图片描述

10、最终运行页面如下图所示。
在这里插入图片描述

页面完整代码


```html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 38%;
            height: 246px;
        }
        .auto-style2 {
            height: 36px;
            width: 219px;
        }
        .auto-style3 {
            height: 36px;
            width: 226px;
            text-align: right;
        }
        .auto-style4 {
            width: 226px;
            text-align: right;
        }
        .auto-style5 {
            height: 36px;
            width: 161px;
        }
        .auto-style6 {
            width: 161px;
        }
        .auto-style7 {
            height: 34px;
        }

p.MsoNormal{
margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
font-family:'Times New Roman';
font-size:10.5000pt;
            margin-left: 0pt;
            margin-right: 0pt;
            margin-top: 0pt;
        }

        .auto-style8 {
            width: 226px;
            text-align: right;
            height: 32px;
        }
        .auto-style9 {
            width: 161px;
            height: 32px;
        }
        .auto-style10 {
            height: 32px;
            width: 219px;
        }
        .auto-style11 {
            width: 226px;
            text-align: right;
            height: 20px;
        }
        .auto-style12 {
            width: 161px;
            height: 20px;
        }
        .auto-style13 {
            height: 20px;
            width: 219px;
        }
        .auto-style16 {
            text-align: left;
            height: 44px;
        }
        .auto-style17 {
            width: 219px;
        }
        .auto-style18 {
            width: 226px;
            text-align: right;
            height: 29px;
        }
        .auto-style19 {
            width: 161px;
            height: 29px;
        }
        .auto-style20 {
            width: 219px;
            height: 29px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table align="center" class="auto-style1">
            <tr>
                <td colspan="3" style="text-align: center" class="auto-style7">用户注册</td>
            </tr>
            <tr>
                <td class="auto-style3">用户名:</td>
                <td class="auto-style5">
                    <asp:TextBox ID="username" runat="server" Width="149px" Height="19px"></asp:TextBox>
                </td>
                <td class="auto-style2">
                    <asp:RequiredFieldValidator ID="rfvusername" runat="server" ControlToValidate="username" ErrorMessage="用户名不能为空" SetFocusOnError="True" Display="Dynamic"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revusername" runat="server" ControlToValidate="username" ErrorMessage="必须以字母开头,长度6-9位" SetFocusOnError="True" ValidationExpression="[a-zA-Z]\w{5,8}" Display="Dynamic"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style4">密码:</td>
                <td class="auto-style6">
                    <asp:TextBox ID="password1" runat="server" Width="149px" Height="19px" TextMode="Password"></asp:TextBox>
                </td>
                <td class="auto-style17">
                    <asp:RequiredFieldValidator ID="refpassword1" runat="server" ControlToValidate="password1" ErrorMessage="密码不能为空" SetFocusOnError="True" Display="Dynamic"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revpassword1" runat="server" ControlToValidate="password1" ErrorMessage="密码长度必须是6位" SetFocusOnError="True" ValidationExpression=".{6}" Display="Dynamic"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style4">确认密码:</td>
                <td class="auto-style6">
                    <asp:TextBox ID="password2" runat="server" Width="149px" Height="19px" TextMode="Password"></asp:TextBox>
                </td>
                <td class="auto-style17">
                    <asp:RequiredFieldValidator ID="refpassword2" runat="server" ControlToValidate="password2" ErrorMessage="确定密码不能为空" SetFocusOnError="True" Display="Dynamic"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revpassword2" runat="server" ControlToValidate="password2" ErrorMessage="确认密码长度为6位" SetFocusOnError="True" ValidationExpression=".{6}" Display="Dynamic"></asp:RegularExpressionValidator>
                    <asp:CompareValidator ID="cvpassword" runat="server" ControlToCompare="password1" ControlToValidate="password2" ErrorMessage="确定密码与密码不一致" SetFocusOnError="True" Display="Dynamic"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style8">
                    <p class="MsoNormal" style="text-align: right">
                        <span style="mso-spacerun:'yes';font-family:宋体;mso-hansi-font-family:'Courier New';
font-size:10.5000pt;mso-font-kerning:1.0000pt;"><font face="宋体" style="text-align: right">性别:</font></span></p>
                </td>
                <td class="auto-style9">
                    <asp:DropDownList ID="sex" runat="server" Height="28px" Width="160px">
                        <asp:ListItem>请选择性别</asp:ListItem>
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td class="auto-style10">
                    <asp:RequiredFieldValidator ID="rfvsex" runat="server" ControlToValidate="sex" ErrorMessage="请选择性别" InitialValue="请选择性别" SetFocusOnError="True"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style18"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">邮箱:</font></span></td>
                <td class="auto-style19">
                    <asp:TextBox ID="email" runat="server" Width="149px" Height="19px"></asp:TextBox>
                </td>
                <td class="auto-style20">
                    <asp:RegularExpressionValidator ID="revemail" runat="server" ControlToValidate="email" ErrorMessage="邮箱格式不正确" SetFocusOnError="True" ValidationExpression="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style4"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">出生日期:</font></span></td>
                <td class="auto-style6">
                    <asp:TextBox ID="birthday" runat="server" Width="149px" Height="19px"></asp:TextBox>
                </td>
                <td class="auto-style17">
                    <asp:RegularExpressionValidator ID="revdbirthday" runat="server" ControlToValidate="birthday" ErrorMessage="日期格式不正确" SetFocusOnError="True" ValidationExpression="^\d{4}-\d{1,2}-\d{1,2}" Display="Dynamic"></asp:RegularExpressionValidator>
                    <asp:RangeValidator ID="revbirthday" runat="server" ControlToValidate="birthday" ErrorMessage="出生日期应小于当前日期" SetFocusOnError="True" Type="Date" Display="Dynamic" MinimumValue="1900-1-1"></asp:RangeValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style8"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">毕业日期:</font></span></td>
                <td class="auto-style9">
                    <asp:TextBox ID="graduateday" runat="server" Width="149px" Height="19px"></asp:TextBox>
                </td>
                <td class="auto-style10">
                    <asp:RegularExpressionValidator ID="revgraduateday" runat="server" ControlToValidate="graduateday" ErrorMessage="日期格式不正确" SetFocusOnError="True" Display="Dynamic" ValidationExpression="^\d{4}-\d{1,2}-\d{1,2}"></asp:RegularExpressionValidator>
                    <asp:CompareValidator ID="cvgraduateday" runat="server" ControlToCompare="birthday" ControlToValidate="graduateday" Display="Dynamic" ErrorMessage="毕业日期应大于出生日期" Operator="GreaterThan" SetFocusOnError="True" Type="Date"></asp:CompareValidator>
                    <asp:RangeValidator ID="rangraduateday1" runat="server" ControlToValidate="graduateday" ErrorMessage="毕业日期应小于当前日期" Type="Date" Display="Dynamic" MinimumValue="1900-1-1"></asp:RangeValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style11"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">身份证号:</font></span></td>
                <td class="auto-style12">
                    <asp:TextBox ID="id" runat="server" Width="149px" Height="19px"></asp:TextBox>
                </td>
                <td class="auto-style13">
                    <asp:RegularExpressionValidator ID="revid" runat="server" ControlToValidate="id" ErrorMessage="身份证号格式不正确" SetFocusOnError="True" ValidationExpression="\d{17}[\d|X]|\d{15}"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style18"><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-hansi-font-family: 'Courier New'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><font face="宋体">手机号:</font></span></td>
                <td class="auto-style19">
                    <asp:TextBox ID="phone" runat="server" Width="149px" Height="19px"></asp:TextBox>
                </td>
                <td class="auto-style20">
                    <asp:RegularExpressionValidator ID="revphone" runat="server" ControlToValidate="phone" ErrorMessage="手机号格式不正确" SetFocusOnError="True" ValidationExpression="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style16" colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:Button ID="Button1" runat="server" Text="注册" Width="98px" />
&nbsp;&nbsp;
                    <asp:Button ID="Button2" runat="server" Text="重填" Width="97px" />
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

后台处理代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default5 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) {
            revbirthday.MaximumValue = DateTime.Now.ToShortDateString();
            rangraduateday1.MaximumValue = DateTime.Now.ToShortDateString();
        }
    }
}

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>

    <system.web>
      <compilation debug="true" targetFramework="4.5.2" />
      <httpRuntime targetFramework="4.5.2" />
    </system.web>
<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>

</configuration>
  • 14
    点赞
  • 2
    评论
  • 95
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值