2.3 多样式验证的ValidatorCallout控件

ASP.NET中的验证控件能够在网页或对话框上显示验证结果。虽然ASP.NET验证能够达到预期的效果，但是验证结果不一定能够非常醒目或更加友好地提供给用户。ASP.NET AJAX Control Toolkit中的ValidatorCallout控件能够实现以非常醒目或更加友好的方式把验证信息显示给用户的功能，效果如图2.4所示。

图2.4 多样式验证效果图

声明ValidatorCallout扩展器控件的语法类似如下：

<ajaxToolkit:ValidatorCalloutExtender

runat="Server"

ID="vceValidator"

TargetControlID="验证控件的ID属性的值"

Width="350px"

HighlightCssClass="样式"

WarningIconImageUrl="警告按钮图像的地址"

CloseImageUrl="关闭按钮图像的地址" />

另外，ValidatorCallout控件包含多个常用的属性，如TargetControlID、Width、Animations、CloseImageUrl、WarningIconImageUrl等。具体说明如表2.3所示。

表2.3 ValidatorCallout控件的常用属性及其说明

^属^性	^说^明
^{TargetControlID}	^{使用该控件的}^ASP.NET^{服务器端控件的}^ID^值
^Width	^宽度
^{CloseImageUrl}	^指定^Close^图像
^{WarningIconImageUrl}	^{指定警告图像}
^{HighlightCssClass}	^{指定验证结果的样式}
^Animations	^{显示或隐藏验证结果的动画}
^OnShow	^{显示验证结果时的动画}
^OnHide	^{隐藏验证结果时的动画}

Width属性指定控件的宽度；CloseImageUrl和WarningIconImageUrl属性分别指定显示验证结果面板中的关闭按钮图像和警告按钮图像；Animations属性指定显示或隐藏验证结果的动画。

注意：ValidatorCallout控件只能应用于验证控件，不能应用于TextBox控件。

在下述代码实例中，Validator.aspx页面演示了为TextBox控件（ID属性的值为tbInput）添加多样式验证的功能。Validator.aspx页面声明了2个RequiredFieldValidator控件和1个RegularExpressionValidator控件，ID属性的值分别为rfInputBlank、rfInputValue和revInput。

其中，rfInputBlank控件验证tbInput控件的内容不能为空；rfInputValue控件验证tbInput控件的内容不能为wmeInput控件（TextBoxWatermarkExtender类型的控件）的水印值“请输入名称”；revInput控件验证tbInput控件内容的最大长度为50，其正则表达式为“.{1,50}”。

注意：Validator.aspx页面声明了3个ValidatorCalloutExtender控件，ID属性的值分别为vceInputBlank、vceInputValue和vceInputRegex。它们分别以多样式形式显示rfInputBlank、rfInputValue和revInput控件的验证结果。

<%@ Page Language="C#" StylesheetTheme="ASPNETAjaxWeb" %>

<head runat="server"><title>多样式验证</title></head>

<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>

<br />请在下面输入框中输入名称：<br />

<asp:TextBox ID="tbInput" runat="server" SkinID="tbSkin"

Width="300px"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfInputBlank" runat="server"

ControlToValidate="tbInput" Display="none"

ErrorMessage="名称不能为空！"></asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID="rfInputValue" runat="server"

ControlToValidate="tbInput" Display="none" InitialValue="请输入名称"