验证控件与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 事件绑定问题
Jan 01 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
js实现文字选中分享功能
Jan 25 Javascript
node.js入门学习之url模块
Feb 25 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
php session 预定义数组
2009/03/16 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
从vue源码看props的用法
2019/01/09 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python中replace方法实例分析
2014/08/20 Python
python中Genarator函数用法分析
2015/04/08 Python
Python的标准模块包json详解
2017/03/13 Python
Python遍历pandas数据方法总结
2018/02/09 Python
python3 flask实现文件上传功能
2020/03/20 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
学习交流会主持词
2014/04/01 职场文书
事业单位考察材料范文
2014/12/25 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS