zoukankan      html  css  js  c++  java
  • 验证控件与Button的OnClientClick事件

    一、事件

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

      在一个页面中,当有验证控件的时候,当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(&quot;ButtonText&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ButtonText" />

        从这行源代码可以看出,验证控件在客户端生成了一段javascript代码,验证TextBox中的值是否为空。当我加上ButtonTest的OnClientClick后,我重新查看了源代码,ButtonTest控件生成的源代码如下:

    <input type="submit" name="ButtonText" value="测试" onclick="return confirm('你确定要提交吗?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ButtonText&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ButtonText" />

        从这行代码中,可以非常清楚的看到问题处在什么地方了,在客户端,首先执行的是自定义的javascript,然后在执行验证控件生成的这一段javascript,显然,在这种情况下,验证控件就失去任何意义了。

    三、响应控件

      知道了问题处在什么地方,就好办了,我的解决办法是:在执行自定义的javascript(return confirm('你确定要提交吗?‘)前 ,就要验证页面中的控件是否符合规则,于是我将ButtonTest的OnClientClick事件修改如下:


     <asp:Button ID="ButtonText" runat="server" Text="测试" OnClientClick="if(CheckClientValidate()) return Confirm('你确定要提交页面吗?');" />

      CheckClientValidate()方法的代码如下:

    Code
    <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;
     }

  • 相关阅读:
    【C#语言规范版本5.0学习】2 词法结构(一、简述)
    【C#语言规范版本5.0学习】1.11 特性
    TP5.1 实现超时未支付订单自动关闭
    tp5.1使用队列
    开启队列时,命令行输入php think queue:listen出现乱码
    mysql 查询分组后的总条数
    处理mysql先排序在分组
    mysql 5.7 sql_mode设置 坑
    Windows 版 SourceTree 免登录跳过初始设置的方法和下载地址
    thinkphp5.1-jwt的安装与使用
  • 原文地址:https://www.cnblogs.com/luxiaobin/p/2230220.html
Copyright © 2011-2022 走看看