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原有的客户端校验功能,亦不失为一种办法。




你可能感兴趣的:(Validator)