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


Posted in Javascript onDecember 04, 2013

一、事件

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

在一个页面中,当有验证控件的时候,当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;
 }
Javascript 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
js实现楼层导航功能
Feb 23 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 #Javascript
js跑步算法的实现代码
Dec 04 #Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 #Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 #Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 #Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 #Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
php防止用户重复提交表单
2015/11/02 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
PHP 文件上传限制问题
2019/09/01 PHP
扩展String功能方法
2006/09/22 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
jquery css实现流程进度条
2020/03/26 jQuery
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python Scrapy框架原理解析
2021/01/04 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
仓库组长岗位职责
2014/01/29 职场文书
七匹狼男装广告词
2014/03/21 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python