验证控件与Button的OnClientClick事件详细分析

发布时间：2023-08-11 14:38:14 所属栏目：教程来源：

导读：一、事件

这是一个长期被我忽略或者是没有发现的问题，问题是这样的：

在一个页面中，当有验证控件的时候，当Button控件触发OnClientClick事件，并且这个事件会返回true和false的时候，验证控件就会失效，不

一、事件

这是一个长期被我忽略或者是没有发现的问题，问题是这样的：

在一个页面中，当有验证控件的时候，当Button控件触发OnClientClick事件，并且这个事件会返回true和false的时候，验证控件就会失效，不起作用了。具体描述如下：

.Net页面如下：

代码如下:

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<asp:TextBox ID="TextBoxTest" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBoxTest"

ErrorMessage="不能为空" Display="None"></asp:RequiredFieldValidator><ajaxToolkit:ValidatorCalloutExtender

ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" runat="server">

</ajaxToolkit:ValidatorCalloutExtender>

<asp:Button ID="ButtonText" runat="server" Text="测试" OnClientClick="return confirm('你确定要提交吗？');" />

</div>

</form>

如上，在页面中加入RequireFieldValidator验证控件，使TextBoxTest的值不能为空，在ButtonText提交页面时，要用户确认是否需要提交。很简单的一个页面，貌似也没有什么问题。可是当TextBoxTest的值为空的时候，验证控件竟然不起作用，提交页面成功。这是什么原因呢？

二、响应事件

这是怎么回事呢？首先我将ButtonTest的OnClientClick事件去掉后，验证控件是起作用的。这又是为什么呢？我查看了页面的源代码，发现ButtonTest控件生成如下源代码：

<input type="submit" name="ButtonText" value="测试" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ButtonText", "", true, "", "", false, false))" id="ButtonText" />

从这行源代码可以看出，验证控件在客户端生成了一段javascript代码，验证TextBox中的值是否为空。当我加上ButtonTest的OnClientClick后，我重新查看了源代码，ButtonTest控件生成的源代码如下：

<input type="submit" name="ButtonText" value="测试" onclick="return confirm('你确定要提交吗？');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ButtonText", "", true, "", "", false, false))" id="ButtonText" />

从这行代码中，可以非常清楚的看到问题处在什么地方了，在客户端，首先执行的是自定义的javascript，然后在执行验证控件生成的这一段javascript，显然，在这种情况下，验证控件就失去任何意义了。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!