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中，窗体验证主要分为客户端验证和服务器端验证，如图所示
在这里插入图片描述

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.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>
...

效果如图所示：
在这里插入图片描述

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>
...

效果如图所示，上图是在范围内的日期，下图是超出范围的日期
在这里插入图片描述

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>
...

效果如下面四幅图所示
在这里插入图片描述

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>
...

效果如下图所示：
在这里插入图片描述

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>
...