通过验证控件使用 TextBoxWatermark (C#)

作者 ：Christian Wenz

下载 PDF

AJAX 控件工具包中的 TextBoxWatermark 控件扩展文本框，以便在框中显示文本。 当用户单击框时，该框将被清空。 如果用户在未输入文本的情况下离开框，则预填充的文本将重新出现。 这可能会与同一页面上的 ASP.NET 验证控件发生冲突，但这些问题可能会被克服。

概述

TextBoxWatermark AJAX 控件工具包中的 控件扩展文本框，以便在框中显示文本。 当用户单击框时，该框将被清空。 如果用户在未输入文本的情况下离开框，则预填充的文本将重新出现。 这可能会与同一页面上的 ASP.NET 验证控件发生冲突，但这些问题可能会被克服。

步骤

示例的基本设置如下： TextBox 控件使用 TextBoxWatermarkExtender 控件进行水印。 按钮触发回发，稍后将用于触发页面上的验证控件。 此外，需要一个 ScriptManager 控件来初始化 ASP.NET AJAX：

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <asp:TextBox ID="Name" runat="server" /> <br />
 <asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><br />
 <asp:Label ID="lbl" runat="server" />
 </div>
 <ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
 TargetControlID="Name" WatermarkText=" Your Name " />
</form>

现在，添加一个 RequiredFieldValidator 控件，用于检查提交表单时字段中是否存在文本。 InitialValue验证器的 属性必须设置为控件中使用的TextBoxWatermarkExtender相同值：提交表单时，未更改文本框的值是其中的水印值：

<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
 Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />

但是，此方法存在一个问题：如果客户端禁用 JavaScript，则文本字段不会预先填充水印文本，因此 RequiredFieldValidator 不会触发错误消息。 因此，需要另 RequiredFieldValidator 一个控件来检查空文本框 (省略 InitialValue 属性) 。

<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
 Text="*" Display="Dynamic" runat="server" />

由于两个验证器都使用 Display="Dynamic"，最终用户无法区分两个验证程序中触发的视觉外观;相反，看起来只有其中一个。

最后，如果没有验证程序发出错误消息，请添加一些服务器端代码以输出字段中的文本：

<script runat="server">
 protected void btn_Click(object sender, EventArgs e)
 {
 lbl.Text = HttpUtility.HtmlEncode(Name.Text);
 }
</script>

验证程序抱怨字段中没有文本 (单击以查看全尺寸图像)

上一页下一页