验证控件像其他服务器控件一样添加到 Web 窗体页。有不同的控件用于特定的验证类型,如范围检查或模式匹配,以及确保用户不跳过输入字段的 RequiredFieldValidator。可以将多个验证控件附加到一个输入控件。例如,可以既指定需要输入,又指定输入必须包含特定范围的值。
验证控件使用 HTML 和 Web 服务器控件的有限子集。对于每个控件,特定的属性包含要验证的值。下表列出了可以验证的输入控件。
控件 | 验证属性 |
HtmlInputText | Value |
HtmlTextArea | Value |
HtmlSelect | Value |
HtmlInputFile | Value |
TextBox | Text |
ListBox | SelectedItem.Value |
DropDownList | SelectedItem.Value |
RadioButtonList | SelectedItem.Value |
验证控件类型
最简单的验证形式是必需的字段。如果用户在字段中输入任何值,则字段有效。如果页中的所有字段都有效,则页有效。下面的示例使用 RequiredFieldValidator 阐释了这一点。
<html>
<head>
<script language="C#" runat=server>
void ValidateBtn_Click(Object Sender, EventArgs E) {
if (Page.IsValid == true) {
lblOutput.Text = "页有效!";
}
else {
lblOutput.Text = "某些必需字段为空";
}
}
</script>
</head>
<body>
<h3><font face="宋体">简单的 RequiredField 验证程序示例</font></h3>
<p>
<form runat="server">
<table bgcolor="#eeeeee" cellpadding=10>
<tr valign="top">
<td colspan=3>
<asp:Label ID="lblOutput" Text="请填写下面的必需字段" ForeColor="red" Font-Name="宋体" Font-Size="10" runat=server /><br>
</td>
</tr>
<tr>
<td colspan=3>
<font face=宋体 size=2><b>信用卡信息</b></font>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>卡类型:</font>
</td>
<td>
<ASP:RadioButtonList id=RadioButtonList1 RepeatLayout="Flow" runat=server>
<asp:ListItem>MasterCard</asp:ListItem>
<asp:ListItem>Visa</asp:ListItem>
</ASP:RadioButtonList>
</td>
<td align=center rowspan=1>
<asp:RequiredFieldValidator id="RequiredFieldValidator1"
ControlToValidate="RadioButtonList1"
Display="Static"
InitialValue="" Width="100%" runat=server>
*
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>卡号:</font>
</td>
<td>
<ASP:TextBox id=TextBox1 runat=server />
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator2"
ControlToValidate="TextBox1"
Display="Static"
Width="100%" runat=server>
*
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>截止日期:</font>
</td>
<td>
<ASP:DropDownList id=DropDownList1 runat=server>
<asp:ListItem></asp:ListItem>
<asp:ListItem >06/00</asp:ListItem>
<asp:ListItem >07/00</asp:ListItem>
<asp:ListItem >08/00</asp:ListItem>
<asp:ListItem >09/00</asp:ListItem>
<asp:ListItem >10/00</asp:ListItem>
<asp:ListItem >11/00</asp:ListItem>
<asp:ListItem >01/01</asp:ListItem>
<asp:ListItem >02/01</asp:ListItem>
<asp:ListItem >03/01</asp:ListItem>
<asp:ListItem >04/01</asp:ListItem>
<asp:ListItem >05/01</asp:ListItem>
<asp:ListItem >06/01</asp:ListItem>
<asp:ListItem >07/01</asp:ListItem>
<asp:ListItem >08/01</asp:ListItem>
<asp:ListItem >09/01</asp:ListItem>
<asp:ListItem >10/01</asp:ListItem>
<asp:ListItem >11/01</asp:ListItem>
<asp:ListItem >12/01</asp:ListItem>
</ASP:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator3"
ControlToValidate="DropDownList1"
Display="Static"
InitialValue="" Width="100%" runat=server>
*
</asp:RequiredFieldValidator>
</td>
<td>
</tr>
<tr>
<td></td>
<td>
<ASP:Button id=Button1 text="验证" OnClick="ValidateBtn_Click" runat=server />
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
还有用于特定验证类型(如范围检查或模式匹配)的验证控件。下表列出了验证控件。
控件名称 | 说明 |
RequiredFieldValidator | 确保用户不跳过输入。 |
CompareValidator | 使用比较运算符(小于、等于、大于等)将用户的输入与另一控件的常数值或属性值进行比较。 |
RangeValidator | 检查用户的输入是否在指定的上下边界之间。 可以检查数字、字母或日期对内的范围。可以将边界表示为常数。 |
RegularExpressionValidator | 检查输入是否与正则表达式定义的模式匹配。该验证类型允许检查可预知的字符序列,如社会保障号、电子邮件地址、电话号码、邮政编码等中的字符序列。 |
CustomValidator | 使用您自己编写的验证逻辑检查用户的输入。该验证类型允许检查运行时导出的值。 |
ValidationSummary |
|
客户端验证
注意,Web 窗体页框架总是在服务器上执行验证,即使已经在客户端执行了验证。这有助于防止用户能够通过模拟另一用户或预获准的事务避开验证。
默认情况下启用客户端验证。如果客户端可以,则将自动执行上层验证。若要禁用客户端验证,请将页的 ClientTarget 属性设置为“Downlevel”(“Uplevel”强制执行客户端验证)。
<%@ Page ClientTarget=UpLevel %>
<html>
<head>
<script language="C#" runat=server>
void Page_Load() {
if (!IsPostBack) {
// 进行初始验证,以便在第一个往返行程前强制显示 *s
Validate();
}
}
void ValidateBtn_Click(Object Sender, EventArgs E) {
if (Page.IsValid == true) {
lblOutput.Text = "页有效!";
}
else {
lblOutput.Text = "某些必需字段为空";
}
}
</script>
</head>
<body>
<h3><font face="宋体">客户端 RequiredFieldValidator 示例</font></h3>
<p>
<form runat="server">
<table bgcolor="#eeeeee" cellpadding=10>
<tr valign="top">
<td colspan=3>
<asp:Label ID="lblOutput" Name="lblOutput" Text="请填写下面的必需字段" ForeColor="red" Font-Name="宋体" Font-Size="10" runat=server /><br>
</td>
</tr>
<tr>
<td colspan=3>
<font face=宋体 size=2><b>信用卡信息</b></font>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>卡类型:</font>
</td>
<td>
<ASP:RadioButtonList id=RadioButtonList1 RepeatLayout="Flow" onclick="ClientOnChange();" runat=server>
<asp:ListItem>MasterCard</asp:ListItem>
<asp:ListItem>Visa</asp:ListItem>
</ASP:RadioButtonList>
</td>
<td align=center rowspan=1>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
ControlToValidate="RadioButtonList1"
ErrorMessage="*"
Display="Static"
InitialValue=""
Width="100%">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>卡号:</font>
</td>
<td>
<ASP:TextBox id=TextBox1 onchange="ClientOnChange();" runat=server />
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator2" runat="server"
ControlToValidate="TextBox1"
ErrorMessage="*"
Display="Static"
Width="100%">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>截止日期:</font>
</td>
<td>
<ASP:DropDownList id=DropDownList1 onchange="ClientOnChange();" runat=server>
<asp:ListItem></asp:ListItem>
<asp:ListItem >06/00</asp:ListItem>
<asp:ListItem >07/00</asp:ListItem>
<asp:ListItem >08/00</asp:ListItem>
<asp:ListItem >09/00</asp:ListItem>
<asp:ListItem >10/00</asp:ListItem>
<asp:ListItem >11/00</asp:ListItem>
<asp:ListItem >01/01</asp:ListItem>
<asp:ListItem >02/01</asp:ListItem>
<asp:ListItem >03/01</asp:ListItem>
<asp:ListItem >04/01</asp:ListItem>
<asp:ListItem >05/01</asp:ListItem>
<asp:ListItem >06/01</asp:ListItem>
<asp:ListItem >07/01</asp:ListItem>
<asp:ListItem >08/01</asp:ListItem>
<asp:ListItem >09/01</asp:ListItem>
<asp:ListItem >10/01</asp:ListItem>
<asp:ListItem >11/01</asp:ListItem>
<asp:ListItem >12/01</asp:ListItem>
</ASP:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator3" runat="server"
ControlToValidate="DropDownList1"
ErrorMessage="*"
Display="Static"
InitialValue=""
Width="100%">
</asp:RequiredFieldValidator>
</td>
<td>
</tr>
<tr>
<td></td>
<td>
<ASP:Button id=Button1 text="验证" OnClick="ValidateBtn_Click" runat="server" />
</td>
<td></td>
</tr>
</table>
</form>
<script language=javascript>
<!--
function ClientOnChange() {
if (typeof(Page_Validators) == "未定义")
return;
document.all["lblOutput"].innerText = Page_IsValid ? "页有效!" : "某些必需字段为空";
}
// -->
</script>
</body>
</html>
显示验证错误
在处理用户的输入时(如提交窗体时),Web 窗体页框架将用户的输入传递给关联的验证控件。验证控件测试用户的输入,并设置属性以指示输入是否通过了验证测试。处理完所有的验证控件后,将设置页上的 IsValid 属性。如果有任何控件显示验证检查失败,则整页设置为无效。
如果验证控件有错误,错误信息可由该验证控件显示在页中,或者显示在页上其他地方的 ValidationSummary 控件中。当页的 IsValid 属性为 false 时,显示 ValidationSummary 控件。它轮询页上的每个验证控件,并聚合每个控件公开的文本消息。下面的示例阐释如何用 ValidationSummary 控件显示错误。
<%@ Page clienttarget=downlevel %>
<html>
<head>
<script language="C#" runat=server>
void ListFormat_SelectedIndexChanged(Object Sender, EventArgs E ) {
// 当从“ListFormat”下拉列表中选择新选项时,
// 更改验证程序摘要的显示模式
valSum.DisplayMode = (ValidationSummaryDisplayMode) ListFormat.SelectedIndex;
}
</script>
</head>
<body>
<h3><font face="宋体">ValidationSummary 示例</font></h3>
<p>
<form runat="server">
<table cellpadding=10>
<tr>
<td>
<table bgcolor="#eeeeee" cellpadding=10>
<tr>
<td colspan=3>
<font face=宋体 size=2><b>信用卡信息</b></font>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>卡类型:</font>
</td>
<td>
<ASP:RadioButtonList id=RadioButtonList1 RepeatLayout="Flow" runat=server>
<asp:ListItem>MasterCard</asp:ListItem>
<asp:ListItem>Visa</asp:ListItem>
</ASP:RadioButtonList>
</td>
<td align=center rowspan=1>
<asp:RequiredFieldValidator id="RequiredFieldValidator1"
ControlToValidate="RadioButtonList1"
ErrorMessage="卡类型。"
Display="Static"
InitialValue="" Width="100%" runat=server>
*
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>卡号:</font>
</td>
<td>
<ASP:TextBox id=TextBox1 runat=server />
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator2"
ControlToValidate="TextBox1"
ErrorMessage="卡号。"
Display="Static"
Width="100%" runat=server>
*
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=宋体 size=2>到期日期:</font>
</td>
<td>
<ASP:DropDownList id=DropDownList1 runat=server>
<asp:ListItem></asp:ListItem>
<asp:ListItem >06/00</asp:ListItem>
<asp:ListItem >07/00</asp:ListItem>
<asp:ListItem >08/00</asp:ListItem>
<asp:ListItem >09/00</asp:ListItem>
<asp:ListItem >10/00</asp:ListItem>
<asp:ListItem >11/00</asp:ListItem>
<asp:ListItem >01/01</asp:ListItem>
<asp:ListItem >02/01</asp:ListItem>
<asp:ListItem >03/01</asp:ListItem>
<asp:ListItem >04/01</asp:ListItem>
<asp:ListItem >05/01</asp:ListItem>
<asp:ListItem >06/01</asp:ListItem>
<asp:ListItem >07/01</asp:ListItem>
<asp:ListItem >08/01</asp:ListItem>
<asp:ListItem >09/01</asp:ListItem>
<asp:ListItem >10/01</asp:ListItem>
<asp:ListItem >11/01</asp:ListItem>
<asp:ListItem >12/01</asp:ListItem>
</ASP:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator3"
ControlToValidate="DropDownList1"
ErrorMessage="失效日期。"
Display="Static"
InitialValue=""
Width="100%"
runat=server>
*
</asp:RequiredFieldValidator>
</td>
<td>
</tr>
<tr>
<td></td>
<td>
<ASP:Button id=Button1 text="验证" runat=server />
</td>
<td></td>
</tr>
</table>
</td>
<td valign=top>
<table cellpadding=20><tr><td>
<asp:ValidationSummary ID="valSum" runat="server"
HeaderText="必须在下列字段中输入值:"
Font-Name="verdana"
Font-Size="12"
/>
</td></tr></table>
</td>
</tr>
</table>
<font face="宋体" size="-1">选择所需的验证摘要显示类型:</font>
<asp:DropDownList id="ListFormat" AutoPostBack=true OnSelectedIndexChanged="ListFormat_SelectedIndexChanged" runat=server >
<asp:ListItem>列表</asp:ListItem>
<asp:ListItem selected>
项目
符号列表</asp:ListItem>
<asp:ListItem>单独一段</asp:ListItem>
</asp:DropDownList>
</form>
</body>
</html>
使用 CompareValidator
CompareValidator 服务器控件比较两个控件的值。CompareValidator 使用三个键属性执行验证。ControlToValidate 和 ControlToCompare 包含要比较的值。Operator 定义要执行的比较类型,例如 Equal 或 Not Equal。CompareValidator 通过将这些属性计算为表达式来执行验证,如下所示:
( ControlToValidate <Operator> ControlToCompare )如果表达式计算为真,则验证结果有效。
下面的示例显示如何使用 CompareValidator 控件。
<%@ Page clienttarget=downlevel %>
<html>
<head>
<script language="VB" runat="server">
Sub Button1_OnSubmit(sender As Object, e As EventArgs)
If (Page.IsValid) Then
lblOutput.Text = "结果:有效!"
Else
lblOutput.Text = "结果:无效!"
End If
End Sub
Sub lstOperator_SelectedIndexChanged(sender As Object, e As EventArgs)
comp1.Operator = lstOperator.SelectedIndex
comp1.Validate
End Sub
</script>
</head>
<body>
<h3><font face="宋体">CompareValidator 示例</font></h3>
<p>在每个文本框中键入一个值,选择一个比较运算符,然后单击“验证”进行测试。</p>
<form runat=server>
<table bgcolor="#eeeeee" cellpadding=10>
<tr valign="top">
<td>
<h5><font face="宋体">字符串 1:</font></h5>
<asp:TextBox id="txtComp" runat="server"></asp:TextBox>
</td>
<td>
<h5><font face="宋体">比较运算符:</font></h5>
<asp:ListBox id="lstOperator" OnSelectedIndexChanged="lstOperator_SelectedIndexChanged" runat="server">
<asp:ListItem Selected Value="Equal" >Equal</asp:ListItem>
<asp:ListItem Value="NotEqual" >NotEqual</asp:ListItem>
<asp:ListItem Value="GreaterThan" >GreaterThan</asp:ListItem>
<asp:ListItem Value="GreaterThanEqual" >GreaterThanEqual</asp:ListItem>
<asp:ListItem Value="LessThan" >LessThan</asp:ListItem>
<asp:ListItem Value="LessThanEqual" >LessThanEqual</asp:ListItem>
</asp:ListBox>
</td>
<td>
<h5><font face="宋体">字符串 2:</font></h5>
<asp:TextBox id="txtCompTo" runat="server"></asp:TextBox><p>
<asp:Button runat=server Text="验证" ID="Button1" onclick="Button1_OnSubmit" />
</td>
</tr>
</table>
<asp:CompareValidator id="comp1" ControlToValidate="txtComp" ControlToCompare = "txtCompTo" Type="String" runat="server"/>
<br>
<asp:Label ID="lblOutput" Font-Name="宋体" Font-Size="10.5pt" runat="server"/>
</form>
</body>
</html>