ASP.NET验证控件合集 含代码演示

简介: ASP.NET验证控件合集 含代码演示

文章目录


1. 窗体验证概述

2. ASP.NET中的数据验证控件

2.1. 空值验证 RequiredFieldValidator控件

2.2. 一致性验证 CompareValidator控件

2.3. 范围验证 RangeValidator控件

2.4. 正则验证 RegularExpressionValidator控件

2.5. 用户定义验证 CustomValidator控件

2.6. 验证错误汇总 ValidationSummany控件


正文


1. 窗体验证概述


为了提高WEB开发人员的开发效率,并降低错误出现的几率,ASP.NET中提供了多种多样的数据验证控件供开发人员使用。


在开发网站的时候,经常需要对用户提交的数据,比如说:验证用户填写的密码是不是符合指定的规则等等,这些都涉及到验证。在ASP.NET中,窗体验证主要分为客户端验证和服务器端验证,如图所示

1.png


2. ASP.NET中的数据验证控件


2.1. 空值验证 RequiredFieldValidator控件


RequiredFieldValidator验证控件用来验证输入文本中的信息内容是否为空

它有五个主要属性

属性 说明
ControlToValidate 表示要进行验证的控件,指定输入控件的ID。如果没有指定有效输入控件,则会在显示页面时引发异常。另外该ID的控件必须和验证控件在相同的容器中
ErrorMessage 当验证不通过时的提示信息
IsValid 设置所验证数据的有效性
Display 设置错误提示信息的显示方式
Text 如果Display为Static,并且不出错时,显示的文本

如下面代码,使用RequiredFieldValidator控件来验证用户是否输入用户名、密码和邮箱

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用户名:"></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="请输入用户名" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="密码:"></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="请输入密码" ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
        </div>
        <div>
            <asp:Label ID="Label3" runat="server" Text="邮箱:"></asp:Label> 
            <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="请输入邮箱" ControlToValidate="TextBox3"></asp:RequiredFieldValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="注册" />
        </div>
    </form>
</body>
...

效果如图所示:

2.png


2.2. 一致性验证 CompareValidator控件


CompareValidator控件是一个比较验证控件,该控件可以将输入控件的值与常数值或其他输入控件的值相比较,以确定这两个值是否与比较运算符(小于、等于、大于等等)指定的关系相匹配;

另外,该控件还有数据类型检查的功能,如判断输入的是否为数字、日期等等。

它有九个主要属性

属性 说明
ControlToCompare 指定用于比较的输入控件的ID。默认是没有的
ValueToCompare 指定要比较的值,默认是没有的
ControlToValidate 指定要进行验证的控件ID,这个属性必须设置为输入控件ID,如果没有指定有效输入控件,那么在显示页面时引发异常。另外该ID的空间必须和验证控件在相同的容器中
ErrorMessage 当验证不通过时显示错误的信息
IsValid 设置所验证数据的有效性
Display 设置错误信息的显示方式
Text 如果Display为Static,并且不出错时,就显示该文本
Type 设置用于比较的两个值的数据类型。
有String、Integer、Double、Date、Currency五个枚举值,默认值为String
Operator 设置验证中使用的比较操作。
有Equal、NotEqual、GreaterThan、GreaterThanEqual、LessThan、LessThanEqual、DataTypeCheck七个枚举值,默认值为Equal

如下面代码,使用CompareValidator控件来验证用户两次输入的密码是否一致

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用户名:"></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="密码:"></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label3" runat="server" Text="确认密码:"></asp:Label> 
            <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="两次输入的密码不一致" ControlToCompare="TextBox2" ControlToValidate="TextBox3"></asp:CompareValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="注册" />
        </div>
    </form>
</body>
...

效果如图所示:

3.png


2.3. 范围验证 RangeValidator控件


RangeValidator控件用于验证用户的输入是否在指定范围内。

它有八个主要属性:

属性 说明
ControlToValidate 指定要进行验证的控件ID,这个属性必须设置为输入控件ID,如果没有指定有效输入控件,那么在显示页面时引发异常。另外该ID的空间必须和验证控件在相同的容器中
ErrorMessage 当验证不通过时显示错误的信息
IsValid 设置所验证数据的有效性
Display 设置错误信息的显示方式
Text 如果Display为Static,并且不出错时,就显示该文本
Type 设置用于比较的两个值的数据类型。
有String、Integer、Double、Date、Currency五个枚举值,默认值为String
MaximumValue 设置要验证范围的最大值,待验证值必须<=MaximumValue ,默认值为空
MinimumValue 设置要验证范围的最小值,待验证值必须>=MinimumValue ,默认值为空

例如下面的代码设计了一个用户注册页面,在该页面中要求用户输入出生日期,出生日期要求限制在1990/1/1 ~2050/1/1之间,如果超过这个范围则显示提示信息。

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label4" runat="server" Text="出生日期:"></asp:Label> 
            <asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="格式不正确" ControlToValidate="TextBox4" MaximumValue="2050/1/1" MinimumValue="1900/1/1" Type="Date"></asp:RangeValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="注册" />
        </div>
    </form>
</body>
...

效果如图所示,上图是在范围内的日期,下图是超出范围的日期


4.png


2.4. 正则验证 RegularExpressionValidator控件


RegularExpressionValidator验证控件用来验证输入控件的值是否与某个正则表达式所定义的模式相匹配,如身份证号码、电子邮件地址、电话号码、邮政编码等。

它有六个主要属性

属性 说明
ControlToValidate 指定要进行验证的控件ID,这个属性必须设置为输入控件ID,如果没有指定有效输入控件,那么在显示页面时引发异常。另外该ID的空间必须和验证控件在相同的容器中
ErrorMessage 当验证不通过时显示错误的信息
IsValid 设置所验证数据的有效性
Display 设置错误信息的显示方式
Text 如果Display为Static,并且不出错时,就显示该文本
ValidationExpression 设置作为验证条件的正则表达式
该属性提供了一些常用的正则表达式,例如电子邮件格式、电话号码格式等等


例如下面的代码通过设置RegularExpressionValidator控件的ControlToValidate属性ValidationExpression属性验证用户输入的E-mail格式和用户名格式是否正确,用户名的输入自定义了一个正则表达式来限制用户名只能输入字母、下画线及数字。

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用户名:"></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="用户名只能是字母、下划线或者数字" ControlToValidate="TextBox1" ValidationExpression="\w+([-+.']\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Label ID="Label4" runat="server" Text="电子邮件:"></asp:Label> 
            <asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="请输入正确的邮件格式" ControlToValidate="TextBox4" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="注册" />
        </div>
    </form>
</body>
...

效果如下面四幅图所示

5.png


2.5. 用户定义验证 CustomValidator控件


CustomValidator控件可以让用户自定义验证功能。例如,可以创建一个验证控件用于检查在文本框中输入的值是否为偶数。

它有七个主要属性

属性 说明
ControlToValidate 指定要进行验证的控件ID,这个属性必须设置为输入控件ID,如果没有指定有效输入控件,那么在显示页面时引发异常。另外该ID的空间必须和验证控件在相同的容器中
ErrorMessage 当验证不通过时显示错误的信息
IsValid 设置所验证数据的有效性
Display 设置错误信息的显示方式
ClientValidationFunction 设置用于验证的自定义函数的名称
EnableClientScript 设置是否启用客户端验证
Visible 设置该控件的可见性

例如下面的代码,实现了当用户输入的密码少于6位时,弹出对话框。

...
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function myValidator() {
            var password = document.getElementById("TextBox2").value
            if (password.length < 6) {
                alert("密码不能少于六位");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用户名:"></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="密码:"></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="密码不能少于六位" ControlToValidate="TextBox2" ClientValidationFunction="myValidator">
            </asp:CustomValidator>
        </div>
        <div>
            <asp:Label ID="Label3" runat="server" Text="确认密码:"></asp:Label> 
            <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="注册" />
        </div>
    </form>
</body>
...

效果如下图所示:

0000000000000000000000000000000.png


2.6. 验证错误汇总 ValidationSummany控件


ValidationSummary控件是错误汇总控件,主要用于收集本页中所有验证控件的错误信息,将它们组织好并一起显示出来,错误列表可以通过列表、项目符号列表或单个段落的形式进行显示。

它有六个主要属性

属性 说明
HeaderText 控件汇总信息
DisplayMode 设置错误信息的显示格式
ShowMessageBox 设置是否以弹出方式显示每个被验证控件的错误信息
ShowSummary 设置是否使用错误汇总信息
EnableClientScript 设置是否使用客户端验证
Validate 执行验证并且更新IsValid属性

例如下面的代码,集中了所有的报错信息,并弹出提示框

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用户名:"></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="用户名只能是字母、下划线或者数字" ControlToValidate="TextBox1" ValidationExpression="\w+([-+.']\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Label ID="Label4" runat="server" Text="出生日期:"></asp:Label> 
            <asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="格式不正确" ControlToValidate="TextBox4" MaximumValue="2050/1/1" MinimumValue="1900/1/1" Type="Date">
            </asp:RangeValidator>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="电子邮件:"></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="请输入正确的邮件格式" ControlToValidate="TextBox4" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="注册" />
        </div>
        <div>
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True" />
        </div>
    </form>
</body>
...

效果如图所示,点击注册按钮后,先显示上图的弹窗汇总,然后再显示下图的列表汇总

000000000000000000000000000000000000.png

相关文章
|
2月前
|
API
【Azure 媒体服务】Media Service的编码示例 -- 创建缩略图子画面的.NET代码调试问题
【Azure 媒体服务】Media Service的编码示例 -- 创建缩略图子画面的.NET代码调试问题
|
2月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
39 8
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
1月前
|
开发框架 JavaScript 前端开发
|
2月前
|
Kubernetes 监控 Devops
【独家揭秘】.NET项目中的DevOps实践:从代码提交到生产部署,你不知道的那些事!
【8月更文挑战第28天】.NET 项目中的 DevOps 实践贯穿代码提交到生产部署全流程,涵盖健壮的源代码管理、GitFlow 工作流、持续集成与部署、容器化及监控日志记录。通过 Git、CI/CD 工具、Kubernetes 及日志框架的最佳实践应用,显著提升软件开发效率与质量。本文通过具体示例,助力开发者构建高效可靠的 DevOps 流程,确保项目成功交付。
49 0
|
2月前
|
XML 开发框架 .NET
.NET框架:软件开发领域的瑞士军刀,如何让初学者变身代码艺术家——从基础架构到独特优势,一篇不可错过的深度解读。
【8月更文挑战第28天】.NET框架是由微软推出的统一开发平台,支持多种编程语言,简化应用程序的开发与部署。其核心组件包括公共语言运行库(CLR)和类库(FCL)。CLR负责内存管理、线程管理和异常处理等任务,确保代码稳定运行;FCL则提供了丰富的类和接口,涵盖网络、数据访问、安全性等多个领域,提高开发效率。此外,.NET框架还支持跨语言互操作,允许开发者使用C#、VB.NET等语言编写代码并无缝集成。这一框架凭借其强大的功能和广泛的社区支持,已成为软件开发领域的重要工具,适合初学者深入学习以奠定职业生涯基础。
90 1
|
2月前
|
API
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
|
2月前
|
存储 Linux 网络安全
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Linux/Linux Container)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Linux/Linux Container)
|
2月前
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
|
2月前
|
开发框架 .NET 编译器
【Azure Developer】使用Azure PubSub服务示例代码时候遇见了.NET 6.0的代码转换问题
【Azure Developer】使用Azure PubSub服务示例代码时候遇见了.NET 6.0的代码转换问题