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原有的客户端校验功能，亦不失为一种办法。
方法一：借助于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原有的客户端校验功能，亦不失为一种办法。
