asp.net WebForm 验证控件的使用

最新推荐文章于 2021-05-22 15:38:26 发布
最新推荐文章于 2021-05-22 15:38:26 发布
阅读量864 收藏 10
点赞数
文章标签： html css asp.net web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46596213/article/details/112255465
版权

实现的效果图：
在这里插入图片描述
当什么都没输入时，点击注册按钮：
在这里插入图片描述
当两次密码输入不一样时：
在这里插入图片描述
当输入了正确的密码时：
在这里插入图片描述
步骤：
第一步：添加一个web窗体，命名为：Regist
在这里插入图片描述
在这里插入图片描述
第二步：Regist.aspx的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Regist.aspx.cs" Inherits="WebApplication3.Regist" %>

<!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>
    <link href="Content/login.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="page">
            <div class="loginwarrp">
                <div class="logo">用户注册</div>
                <div class="login_form">
                    <ul>
                        <li class="login-item">
                            <span>用户名：</span>
                            <asp:TextBox ID="txtUser" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="输入用户名" ControlToValidate="txtUser" ForeColor="Red"></asp:RequiredFieldValidator>
                        </li>
                        <li class="login-item">
                            <span>密码：</span>
                            <asp:TextBox ID="txtPwd" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="输入密码" ControlToValidate="txtPwd" ForeColor="Red"></asp:RequiredFieldValidator>

                        </li>
                        <li class="login-item">
                            <span>确认密码：</span>
                            <asp:TextBox ID="txtPwdSet" runat="server" TextMode="Password" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="输入密码" ForeColor="Red" Display="Dynamic" ControlToValidate="txtPwdSet"></asp:RequiredFieldValidator>
                            <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="两次密码输入不一致" ControlToValidate="txtPwdSet" ControlToCompare="txtPwd" ForeColor="Red"></asp:CompareValidator>
                        </li>
                        <li class="login-sub">
                            <asp:Button ID="btnOK" runat="server" Text="注册" OnClick="btnOK_Click" />
                            <input id="Reset1" type="reset" value="重置" />
                        </li>
                        <li class="login-item">
                            <asp:Label ID="lblMessage" runat="server" Text="" ForeColor="#CC0000"></asp:Label>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

第三步：Regist.aspx.cs的代码

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

namespace WebApplication3
{
    public partial class Regist : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnOK_Click(object sender, EventArgs e)
        {
            //Page对象的属性，返回bool值
            //指示该页面是否验证成功
            if (Page.IsValid)
            {
                lblMessage.Text = "信息注册成功";
            }
        }
    }
}

第四步：样式文件login.css

body{
    background:#ddd;
}
ol,ul,li{
    list-style:none;
}
.loginwarrp{
    margin:250px auto;
    width:400px;
    padding:30px 50px;
    background:#FFFFFF;
    overflow:hidden;
    font-size:14px;
    font-family:'微软雅黑','文泉驿正黑','黑体';
}
.loginwarrp .logo{
    width:100%;
    height:44px;
    line-height:44px;
    font-size:20px;
    text-align:center;
    border-bottom:1px solid #ddd;
}
.loginwarrp .login_form{
    margin-top:15px;
}
.loginwarrp .login_form .login-item{
    padding:2px 8px;
    border:1px solid #dedede;
    border-radius:8px;
    margin-top:10px;
}
.loginwarrp .login_form .login_input{
    height:35px;
    border:none;
    line-height:35px;
    width:200px;
    font-size:14px;
    outline:none;
}
.loginwarrp .login_form .verify{
    float:left;
}
.loginwarrp .verify .verify_input{
    width:160px;
}
.loginwarrp .verifyimg{
    height:30px;
    margin:20px 0 0 20px;
}
.loginwarrp .login-sub{
    text-align:center;
}
    .loginwarrp .login-sub input {
        margin-top: 15px;
        background: #45B549;
        line-height: 35px;
        width: 150px;
        color: #FFFFFF;
        font-size: 16px;
        font-family: '微软雅黑','文泉驿正黑','黑体';
        border:none;
        border-radius:5px;
    }
    .loginwarrp .login_form .login-item .error {
        color: #F00;
        font-family: '微软雅黑','文泉驿正黑','黑体';
    }

注意：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

现在多加入两个标签用来显示年龄和邮箱
使用范围验证控件来判断年龄是否符合规定范围、使用正则表达式验证控件来判断邮箱格式是否正确

效果图如下：
什么都不输入的情况下：
在这里插入图片描述
都输入正确：
在这里插入图片描述
当年龄范围不在18-120岁时，以及邮箱格式不正确的时候：
在这里插入图片描述
代码如下：regist.aspx的代码，其余代码不变

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Regist.aspx.cs" Inherits="WebApplication3.Regist" %>

<!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>
    <link href="Content/login.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="page">
            <div class="loginwarrp">
                <div class="logo">用户注册</div>
                <div class="login_form">
                    <ul>
                        <li class="login-item">
                            <span>用户名：</span>
                            <asp:TextBox ID="txtUser" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="输入用户名" ControlToValidate="txtUser" ForeColor="Red"></asp:RequiredFieldValidator>
                        </li>
                        <li class="login-item">
                            <span>密码：</span>
                            <asp:TextBox ID="txtPwd" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="输入密码" ControlToValidate="txtPwd" ForeColor="Red"></asp:RequiredFieldValidator>

                        </li>
                        <li class="login-item">
                            <span>确认密码：</span>
                            <asp:TextBox ID="txtPwdSet" runat="server" TextMode="Password" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="输入密码" ForeColor="Red" Display="Dynamic" ControlToValidate="txtPwdSet"></asp:RequiredFieldValidator>
                            <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="两次密码输入不一致" ControlToValidate="txtPwdSet" ControlToCompare="txtPwd" ForeColor="Red"></asp:CompareValidator>
                        </li>
                        <li class="login-item">
                            <span>输入年龄：</span>
                            <asp:TextBox ID="txtAge" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="输入年龄" ControlToValidate="txtAge" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
                            <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="年龄错误" ControlToValidate="txtAge" MaximumValue="120" MinimumValue="18" Type="Integer" Display="Dynamic" ForeColor="Red"></asp:RangeValidator>
                        </li>
                        <li class="login-item">
                            <span>输入邮箱：</span>
                            <asp:TextBox ID="txtEmail" runat="server" class="login_input" Display="Dynamic"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="输入邮箱" ForeColor="Red" Display="Dynamic" ControlToValidate="txtEmail" ></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="邮箱格式不正确" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="txtEmail" ForeColor="Red" Display="Dynamic"></asp:RegularExpressionValidator>
                        </li>
                        <li class="login-sub">
                            <asp:Button ID="btnOK" runat="server" Text="注册" OnClick="btnOK_Click" />
                            <input id="Reset1" type="reset" value="重置" />
                        </li>
                        <li class="login-item">
                            <asp:Label ID="lblMessage" runat="server" Text="" ForeColor="#CC0000"></asp:Label>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

现在再加入两个控件：自定义验证控件用来验证用户是否存在

首先需要在用户名处添加一个自定义验证控件：
在这里插入图片描述
第二步：找到它的它的ServerValidate事件，命名为：IsUserNameExist
在这里插入图片描述
双击事件编写代码：

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

namespace WebApplication3
{
    public partial class Regist : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnOK_Click(object sender, EventArgs e)
        {
            //Page对象的属性，返回bool值
            //指示该页面是否验证成功
            if (Page.IsValid)
            {
                lblMessage.Text = "信息注册成功";
            }
        }

        protected void IsUserNameExist(object source, ServerValidateEventArgs args)
        {
            //ServerValidateEventArgs包括两个属性，value为被验证表单的字段值
            //isvalid为是否验证成功
            if (args.Value == "123")
            {
                args.IsValid = false;
            }
            else
            {
                args.IsValid = true;
            }
            
        }
    }
}

效果图如下：
在这里插入图片描述
接下来再加入一个控件，错误汇总控件，效果图如下
在这里插入图片描述
第一步：在最后加入一个错误汇总控件
在这里插入图片描述
然后在所有的非空验证控件中，添加一个属性Text="*"即可。

综上所述：
最终完整代码：
Regist.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Regist.aspx.cs" Inherits="WebApplication3.Regist" %>

<!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>
    <link href="Content/login.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="page">
            <div class="loginwarrp">
                <div class="logo">用户注册</div>
                <div class="login_form">
                    <ul>
                        <li class="login-item">
                            <span>用户名：</span>
                            <asp:TextBox ID="txtUser" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="输入用户名" ControlToValidate="txtUser" ForeColor="Red" Text="*"></asp:RequiredFieldValidator>
                            <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="用户已存在" ForeColor="Green" ControlToValidate="txtUser" OnServerValidate="IsUserNameExist"></asp:CustomValidator>
                        </li>
                        <li class="login-item">
                            <span>密码：</span>
                            <asp:TextBox ID="txtPwd" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="输入密码" ControlToValidate="txtPwd" ForeColor="Red" Text="*"></asp:RequiredFieldValidator>

                        </li>
                        <li class="login-item">
                            <span>确认密码：</span>
                            <asp:TextBox ID="txtPwdSet" runat="server" TextMode="Password" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="输入密码" ForeColor="Red" Display="Dynamic" ControlToValidate="txtPwdSet" Text="*"></asp:RequiredFieldValidator>
                            <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="两次密码输入不一致" ControlToValidate="txtPwdSet" ControlToCompare="txtPwd" ForeColor="Red"></asp:CompareValidator>
                        </li>
                        <li class="login-item">
                            <span>输入年龄：</span>
                            <asp:TextBox ID="txtAge" runat="server" class="login_input"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="输入年龄" ControlToValidate="txtAge" ForeColor="Red" Display="Dynamic" Text="*"></asp:RequiredFieldValidator>
                            <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="年龄错误" ControlToValidate="txtAge" MaximumValue="120" MinimumValue="18" Type="Integer" Display="Dynamic" ForeColor="Red"></asp:RangeValidator>
                        </li>
                        <li class="login-item">
                            <span>输入邮箱：</span>
                            <asp:TextBox ID="txtEmail" runat="server" class="login_input" Display="Dynamic"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="输入邮箱" ForeColor="Red" Display="Dynamic" ControlToValidate="txtEmail" Text="*"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="邮箱格式不正确" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="txtEmail" ForeColor="Red" Display="Dynamic"></asp:RegularExpressionValidator>
                        </li>
                        <li class="login-sub">
                            <asp:Button ID="btnOK" runat="server" Text="注册" OnClick="btnOK_Click" />
                            <input id="Reset1" type="reset" value="重置" />
                        </li>
                        <li class="login-item">
                            <asp:Label ID="lblMessage" runat="server" Text="" ForeColor="#CC0000"></asp:Label>

                        </li>
                        <li class="login-item">
                            <asp:ValidationSummary ID="ValidationSummary1" runat="server" ForeColor="Red"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Regist.aspx.cs中的代码：

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

namespace WebApplication3
{
    public partial class Regist : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnOK_Click(object sender, EventArgs e)
        {
            //Page对象的属性，返回bool值
            //指示该页面是否验证成功
            if (Page.IsValid)
            {
                lblMessage.Text = "信息注册成功";
            }
        }

        protected void IsUserNameExist(object source, ServerValidateEventArgs args)
        {
            //ServerValidateEventArgs包括两个属性，value为被验证表单的字段值
            //isvalid为是否验证成功
            if (args.Value == "123")
            {
                args.IsValid = false;
            }
            else
            {
                args.IsValid = true;
            }
            
        }
    }
}
懒羊羊♛
关注
专栏目录
ASP.NET Web程序设计 第二章 验证控件
高瑜的博客
03-08 5272
一、数据验证控件 1、对于B/S架构而言，程序功能在可能的情况下，首选在客户端实现。 2、数据验证有 3 种方式 1）后端代码验证：需要将数据提交给服务器来验证。由于性能问题，一般不建议使用。 2）JavaScript 验证：在客户端验证，建议首选。 3）服务器验证控件：结合前者的特点，建议快速开发场合使用。 3、ASP.NET 提供了 5 种验证控件和 1 个摘要控件 二、非空和比较验证控件的使...
ASP.NET登录控件login。
weixin_34186931的博客
11-15 413
1、Login控件。通常情况下会出现3个核心元素。用户名文本框、密码输入框、提交凭证的按钮。 1&gt;、比较重要的属性：CreateUserText属性：包含站点注册页的链接文本。CreateUserUrl可以指定注册页的url。 DestinationPageUrl属性指定当登录尝试成功时显示的页面。他将重写Login控件默认行为以及在配置文件中所做的defaultUrl设置。 Fail...
webform 验证控件
weixin_34056162的博客
08-15 135
验证： 一、非空验证 RequiredFieldValidator ErrorMessage - 验证出错后的提示信息 ControlToValidate - 要验证的控件的ID Display - 显示方式。Static-不显示也占空间。Dynamic-不显示不占空间 InitialValue - 验证的初始值，被验证控件的值与此值相同的话，就认为是空 场...
【asp.net】Web控件-验证控件
写一封信
08-08 1160
前言     第一次接触有关验证的问题是在学生信息管理系统，当时凯、璐师傅验收时，给我提出了很多改进的建议，那也是我第一次感觉看到了通向程序设计的路。在之后的学习过程中，我们不断巩固以及学习新的内容。对于验证的问题也不断有了新的理解和运用。     关于验证的问题，我经过下面的阶段：（1）完成一个方法时，判断输入的内容是否符合要求；（2）用ascii码以及控件属性进行输入的限制；（3）正则表达
ASP.NET验证控件
覃庆奖
09-08 292
在Web应用程序中，一般都要对用户进行信息验证，确保是一些合法的用户才可以正常的登陆上系统，那么今天要介绍的ASP.NET验证控件共有六种，它们的历史对于计算机行业来说，是有一点的老旧，但是目前还是有很多的企业用到。 （1）RequiredFieldValidator（必须字段验证） 用于检查是否有输入值 1.前端代码 <%@ Page Language="C#" AutoEven...
asp.net webform 注册登录Demo
02-23
1. **表单验证**：为了确保用户输入的有效性，如邮箱格式、密码强度等，我们会使用ASP.NET的服务器控件进行客户端和服务器端的验证。这包括RequiredFieldValidator（检查非空）、RegularExpressionValidator（验证...
Asp.net webForm设置允许表单提交Html的方法
10-18
这里，`requestValidationMode="2.0"`意味着使用ASP.NET 2.0的请求验证模式，该模式下默认不会对GET请求进行验证，仅在POST请求时才进行验证，因此允许HTML提交。 **注意事项：** 虽然禁用了请求验证，但这样做也会...
18个ASP.NET WebForm项目源码
08-19
ASP.NET WebForm是微软开发的一款用于构建Web应用程序的框架，它是.NET Framework的重要组成部分。这个压缩包包含18个ASP.NET WebForm项目的源码，对于学习和理解WebForm的工作原理、开发流程以及数据库交互等方面...
学生选课成绩管理系统（asp.net webForm 源码）
05-31
6. **安全与稳定性**：ASP.NET框架内置的安全特性，如身份验证、授权和加密服务，确保了系统的安全性和稳定性。同时，良好的异常处理机制保证了系统的健壮性。 7. **数据库设计**：系统可能采用关系型数据库，如SQL...
asp.net 人事管理系统(源码+数据库+webform).rar
12-24
Webform，表示该系统使用的是ASP.NET Web表单技术来构建用户交互界面。 【标签】：“C#”表明该系统是用C#语言编写的，C#是.NET框架的主要编程语言，具有面向对象、类型安全、跨平台等特点，适合开发企业级应用程序...
ASP.NET简单LOGIN控件实例
01-07
ASP.NET简单LOGIN控件实例 一个很简单的例子 很适合初学者
asp.net中webForm验证码
zhu1991_的博客
12-15 1666
（1）随机产生一个长度为N的随机字符串，N的值可由开发可由开发人员自行设置。该字符串可以包含数字、字母等。 （2）将随机生成的字符串创建成图片，并显示。 （3）保存验证码。 新建一个页面为default.aspx,  放置一个TextBox控件和一个Image控件，TextBox控件用于输入生成的字符串，Image控件用于显示字符串，它的图片就为生成的图形验证码imageUrl=“/defa
.NET WEB 验证控件的简单使用
BaiBai
11-22 412
记录一下自己初步认识.NET验证控件中的使用。 RequiredFieldValidator 控件 RequiredFieldValidator控件会让文本框里的内容成为一个必填字段，可以设置当未进行内容输出时出现的错误提醒，修改字体颜色。背景颜色以及等等...... RangeValidator 控件 rangevalidatorkong控件可以设置文本框内填写内容的范围，可以设置为日期...
web电子邮箱表单验证
loveqingqingqing的博客
09-19 592
创建4个jsp: 实现窗口用表单的格式正则表达式： 创建登录成功页面： 创建登陆失败的页面： 创建执行登陆页面后的页面： 运行结果如下：
ASP.NET 自定义的一个日期验证控件
alieen_941124的博客
06-02 199
ASP.NET 自定义的一个日期验证控件 usingSystem;usingSystem.Collections.Generic;usingSystem.Text;usingSystem.Web.UI.WebControls;usingSystem.IO;...
WebForm 验证控件
a5868530的博客
07-19 291
验证控件一般是在注册的时候用到，是直接将JS代码封装到了控件里面，拉过来直接可以用，下面介绍一下主要用法： 1、CompareValidator：比较验证 常用属性：ControlToCompare 用来进行比较的控件的ID ControlToValidate 要验证的控件的ID 　　　　 　 Display 验证程序的的显示方式 （Dy...
asp.net代码练习 work040 自定义验证控件
虾米大王的学习历程
05-22 234
webform1.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="work040.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Cont
MVC 检测用户是否已经登录
焦点男孩
11-18 6200
前言当我们访问某个网站的时候需要检测用户是否已经登录（通过Session是否为null），我们知道在WebForm中可以定义一个BasePage类让他继承System.Web.UI.Page，重写它的OnInit()方法，在OnInit()中判断Session中是否有用户登录的信息 /// /// 公共基类里面干一些公共的事情 /// public classBasePage
ASP.NET WebForm控件详解：TableCell属性与Web开发
.NET架构下的ASP.NET支持多种核心技术，如数据源和数据绑定控件简化了数据操作，登录控件和成员、角色管理提供了身份验证和授权功能，导航控件有助于构建网站的导航结构，母版页技术统一了页面布局，而主题和皮肤则...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值