TextBoxWatermarkExtender扩展器与RequiredFieldValidator控件相冲突的解决方案

TextBoxWatermarkExtender扩展器与RequiredFieldValidator控件相冲突的解决方案

作者  朱先忠

问题描述

在使用AJAX CONTROL TOOLKIT扩展器TextBoxWatermarkExtender扩展器时，我们常常需要联合使用ASP.NET 校验器 控件RequiredFieldValidator。但这样以来，当用户没有在文本框中输入文字时， TextBoxWatermarkExtender扩展器的WatermarkText属性将在文本框中加入水印效果文字。 于是出现一个问题：无论用户是否在文本框中输入了内容， 文本框的内容终不会为空 。也就是说，此 文本框将始终能够通过 校验器 控件RequiredFieldValidator的验证。

如之奈何？

解决办法

针对上面的矛盾问题，我下面给出几种典型的克服办法。

方法一：借助于CustomValidator控件

借助于CustomValidator的客户端脚本函数可以从客户端对文本框内容进行校验。
示例如下：

---

用户名：<asp:textbox id="UserName" runat="server"></asp:textbox>
<asp:RequiredFieldValidator id="rfN" runat="server" ErrorMessage="姓名不能为空！"
    ControlToValidate="UserName"></asp:RequiredFieldValidator>
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="UserName"  WatermarkText="请在此输入姓名">
</ajaxToolkit:TextBoxWatermarkExtender>
<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="validateUserName" ErrorMessage="请在此输入姓名"
ControlToValidate="UserName" Display="Dynamic">*</asp:CustomValidator>

---

再来看ClientValidationFunction属性对应内容，如下所示：

---

    <script. type="text/javascript">
        function validateUserName(sender, args) {
            if (args.Value == "请在此输入姓名") {
                args.IsValid = false;
            }
        }
............

---

评价：此方案把校验交给了客户端JS脚本。上面的函数validateUserName 实现了把文本框内容与水印文字对照。如果是原来的 水印文字则认为 文本框仍然没有输入内容，从而保持了 校验器 控件RequiredFieldValidator的原有的验证效果 。


方法二：借助于双重 RequiredFieldValidator 控件

不种方法不需借助于客户端脚本函数便可以保留 校验器 控件RequiredFieldValidator 对文本框内容的校验功能。请看下面的示例代码：

---

<asp:TextBox ID="tbUsername" runat="server"  Width="60%" MaxLength="50"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfNameBlank" runat="server" ControlToValidate="tbUsername" Display="none" ErrorMessage="用户名称不能为空！"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfNameValue" runat="server" ControlToValidate="tbUsername" Display="none" InitialValue="请输入用户名称" ErrorMessage="用户名称不能为空！"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revName" runat="server" ControlToValidate="tbUsername" Display="none" ErrorMessage="用户名称的长度最大为50，请重新输入。" ValidationExpression=".{1,50}"></asp:RegularExpressionValidator>
<ajaxToolkit:TextBoxWatermarkExtender ID="wmeName" runat="server" TargetControlID="tbUsername" WatermarkText="请输入用户名称" WatermarkCssClass="Watermark"></ajaxToolkit:TextBoxWatermarkExtender>
<ajaxToolkit:ValidatorCalloutExtender ID="vceNameBlank" runat="server" TargetControlID="rfNameBlank" HighlightCssClass="Validator"></ajaxToolkit:ValidatorCalloutExtender>
<ajaxToolkit:ValidatorCalloutExtender ID="vceNameValue" runat="server" TargetControlID="rfNameValue" HighlightCssClass="Validator"></ajaxToolkit:ValidatorCalloutExtender>
<ajaxToolkit:ValidatorCalloutExtender ID="vceNameRegex" runat="server" TargetControlID="revName" HighlightCssClass="Validator"></ajaxToolkit:ValidatorCalloutExtender>

---

当然，上面代码中，你可以省略使用另一种扩展器控件 ValidatorCalloutExtender。

另外两种可能的解决方案

除了上述二法，还有 另外两种可能的解决方案如下：

第一种是借助于Page.Validate()方法对输入进行验证。这种方法实现起来比较简单，但却丧失了 校验器 控件RequiredFieldValidator原有的客户端校验功能，而且引发一次不必要的页面回送。

第二种方法是使用RegularExpressionValidator取代 RequiredFieldValidator，即使用正则表达式来进行验证，只是嫌写起来比较麻烦，但保留了 校验器 控件RequiredFieldValidator原有的客户端校验功能，亦不失为一种办法。