验证控件与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 模式设计之工厂模式详细说明
May 10 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP数组实例详解
2016/06/26 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python多进程编程技术实例分析
2014/09/16 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Django 再谈一谈json序列化
2020/03/16 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python 对xml解析的示例
2021/02/27 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
机械工程师的岗位职责
2013/11/17 职场文书
大学运动会通讯稿
2014/01/28 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
师德师风的心得体会
2014/09/02 职场文书
施工安全协议书范本
2014/09/26 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书