验证控件与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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
ionic选择多张图片上传的示例代码
Oct 10 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
基于python编写的微博应用
2014/10/17 Python
Python实现二叉堆
2016/02/03 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
python右对齐的实例方法
2020/07/05 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
京剧自荐信
2014/01/26 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
万能检讨书
2015/01/27 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python