验证控件与Button的OnClientClick事件详细解析_javascript技巧

一、事件

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

在一个页面中,当有验证控件的时候,当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,显然,在这种情况下,验证控件就失去任何意义了。

三、响应控件

知道了问题处在什么地方,就好办了,我的解决办法是:在执行自定义的javascript(return confirm('你确定要提交吗?‘)前 ,就要验证页面中的控件是否符合规则,于是我将ButtonTest的OnClientClick事件修改如下:

复制代码 代码如下:

<asp:Button ID="ButtonText" runat="server" Text="测试" OnClientClick="if(CheckClientValidate()) return Confirm('你确定要提交页面吗?');" />

CheckClientValidate()方法的代码如下:

复制代码 代码如下:

<script language="javascript" type="text/javascript">
function CheckClientValidate(){ 
   Page_ClientValidate();
   if (Page_IsValid){
   return true;
   }else{
   return false;
   }
 }
</script>

运行,测试。验证控件发挥作用。问题解决。

四、后记

这就是被我已知忽略的问题和解决方案,当我发觉这个问题的时候,冒出了一身冷汗,幸亏做了严格的服务器端验证,不然可就惨了。从这里也可以看出指定严格的服务器端验证是多么的有必要啊:-)。它不仅可以防止”黑客“绕过客户端验证,还可以防止因为自己没有发觉的错误,造成数据的不准确。

注:

Page_ClientValidate(),本函数用于在包含微软验证控件的aspx页面中,根据用户输入操作是否合法,返回True或者False

可直接判断。

复制代码 代码如下:

 if(Page_ClientValidate())
 {
 return true;
 }
 else
 {
 return false;
 }

时间: 2024-11-10 01:12:14

验证控件与Button的OnClientClick事件详细解析_javascript技巧的相关文章

控件-求助:button点击事件无法触发

问题描述 求助:button点击事件无法触发 前台是这样的 已选择: </ul> <asp:Button ID="btn_update_app" runat="server" Text="确定" onclick="btn_confirm_Click" /> <input id="Button3" type="button" value="取消&qu

JS中artdialog弹出框控件之提交表单思路详解_javascript技巧

artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

判断控件是否已加载完成的代码_javascript技巧

例如: 复制代码 代码如下: <input id="btnPost" type="button" value="button" /> <img src="../jqueryui/themes/base/images/ui-icons_cd0a0a_256x240.png" alt="" id="imga" /> 浏览器在解析时,首先加载 input标签,然后加载i

js控制页面控件隐藏显示的两种方法介绍_javascript技巧

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visibility="visible"; 方法二: 复制代码 代码如下: document.all["panelsms&

JS实现在Repeater控件中创建可隐藏区域的代码_javascript技巧

由于web应用的规模不断增大,数据也越来越多了,有时候,由于在一个页面同时显示的数据太多,从而造成页面的不美观,用户因此也会感到厌倦和操作困难.因此,本文将介绍利用repeater控件的隐藏区域,以达到较好的数据显示效果.   防止数据过多加载有很多方法,比如采用数据分页的方法,又或者采用master/detail的方式,就是先显示每条数据的主要内容,而对于详细数据,用户只需要点detail的链接就可以了.本文将介绍另外一种方式来显示数据,它采用折叠的隐藏方式,当用户需要看每条记录的详细描述时,

javascript客户端遍历控件与获取父容器对象示例代码_javascript技巧

1,遍历也面中所有的控件function findControlAll()    {        var inputs=document.getElementsByTagName("input");        for(j=0;j<inputs.length;j++)           if(inputs[j].type=="text") //这儿将页面所有类型为text的控件找出来,也可以设置成你想遍历的控件类型       {            

javascript遍历控件实例详细解析_javascript技巧

js遍历页面控件, 复制代码 代码如下:  var inputArr = document.forms[0];   for( var i = 0; i < inputArr.length; i++ ) {    if( inputArr[i].type.toUpperCase() == "BUTTON" ) {     inputArr[i].disabled="disabled";    }else if( inputArr[i].type.toUpperC

Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案_javascript技巧

UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图片)都无法正常缩放,选中图片,用鼠标点击并拖动图片边沿的小标签,图片只能缩小不能放大.尝试过很多方法都没办法解决,甚至检查了js源码,也没有发现有任何异常的地方. 后来无意中发现页面上引入了Bootstrap,而Bootstrap默认将box-sizing样式统一设成border-box了.具体内容

js将控件隐藏及display属性的使用介绍_javascript技巧

用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性.当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"