ValidatorCallout:更加醒目的Validator

最新推荐文章于 2019-08-14 02:42:17 发布

Kalen_Chen

最新推荐文章于 2019-08-14 02:42:17 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX ASP.NET系列文章标签： server asp textbox triggers stylesheet 扩展

本文链接：https://blog.youkuaiyun.com/Kalen_Chen/article/details/1649291

AJAX ASP.NET系列专栏收录该内容

24 篇文章

订阅专栏

本文介绍ValidatorCallout扩展器的应用，通过示例展示如何增强ASP.NET中Validator控件的错误提示，提高用户体验。代码示例展示了如何配置扩展器以实现更醒目的错误消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ValidatorCallout扩展器控件可以扩展ASP.NET中的Validator类型的控件，让其显示的错误提示变得更加醒目，对用户更加友好。

示例运行效果：

图(1)

图(2)

图(3)

ValidatorCalloutDemo.aspx代码示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidatorCalloutDemo.aspx.cs" Inherits="Chapter08_ValidatorCalloutDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>ValidatorCallout Demo</title>

.highlight

{

background-color: lemonchiffon;

}

</style>

</head>

<body>

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

<div class="demoheading">更加醒目的Validator</div>

<table>

<tr>

<td><asp:TextBox runat="server" ID="tbName"

BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" /></td>

</tr>

<tr>

<td><asp:TextBox runat="server" ID="tbEmail"

BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" /></td>

</tr>

<tr>

<td>Phone Number:</td>

<td><asp:TextBox runat="server" ID="tbPhoneNumber"

BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" /></td>

</tr>

</table>

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

ControlToValidate="tbName"

Display="None"

ErrorMessage="<b>Required Field Missing</b><br />A name is rquired." />

<ajaxToolkit:ValidatorCalloutExtender ID="NReqE" runat="server"

TargetControlID="NReq"

HighlightCssClass="highlight"

Width="240px" />

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

ControlToValidate="tbPhoneNumber"

Display="None"

ErrorMessage="<b>Required Field Missing</b><br />A phone number is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'><b>Other Options:</b><br /><a href='javascript:alert("No phone number available in profile.");'>Extract from Profile</a></div>" />

<ajaxToolkit:ValidatorCalloutExtender runat="server" ID="PNReqE"

TargetControlID="PNReq"

HighlightCssClass="highlight"

Width="350px" />

<asp:RegularExpressionValidator runat="server" ID="PNRegEx"

ControlToValidate="tbPhoneNumber"

Display="None"

ValidationExpression="(((d{3}) ?)|(d{3}-))?d{3}-d{4}"

ErrorMessage="<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####" />

<ajaxToolkit:ValidatorCalloutExtender runat="server" ID="PNReqEx"

TargetControlID="PNRegEx"

HighlightCssClass="highlight"

Width="350px" />

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

ControlToValidate="tbEmail"

Display="None"

ErrorMessage="<b>Required Field Missing</b><br />A E-mail is required." />

<ajaxToolkit:ValidatorCalloutExtender ID="EMReqE" runat="server"

TargetControlID="EMReq"

HighlightCssClass="highlight"

Width="240px" />

<asp:RegularExpressionValidator runat="server" ID="EMRegEx"

ControlToValidate="tbEmail"

Display="None"

ValidationExpression="w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*"

ErrorMessage="<b>Invalid Field</b><br />Please enter a E-mail.<br />e.g.kalen@126.com" />

<ajaxToolkit:ValidatorCalloutExtender runat="server" ID="EMRegExe"

TargetControlID="EMRegEx"

HighlightCssClass="highlight"

Width="240px" />

<!--

TargetControlID：该扩展器目标Validator控件的ID，即将要被扩展的Validator控件的ID

HighlightCssClass：显示错误提示时，被验证控件将应用的样式

Width：弹出的显示错误的面板的宽度

WarningIconImageUrl：自定义警告图标的URL

CloseImageUrl：自定义关闭图标的URL

-->

<br />

<asp:Button ID="btnOK" runat="server" Text="Submit" OnClick="btnOK_Click" /><br /><br />

<asp:UpdatePanel ID="up" runat="server">

<asp:Label ID="lbResult" runat="server" />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnOK" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</form>

</body>

</html>

ValidatorCalloutDemo.aspx.cs代码示例：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class Chapter08_ValidatorCalloutDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnOK_Click(object sender, EventArgs e)

{

lbResult.Text = string.Format("Name: {0} <br /> Email: {1} <br /> Phone Number: {2}",

tbName.Text, tbEmail.Text, tbPhoneNumber.Text);

}