以下就是被我已知忽略的问题和解决方案,当我发觉这个问题的时候,冒出了一身冷汗,幸亏做了严格的服务器端验证,不然可就惨了
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一、事件
这是一个长期被我忽略或者是没有发现的问题,问题是这样的:
在一个页面中,当有验证控件的时候,当 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;
- }
来源: