亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

驗(yàn)證控件與Button的OnClientClick事件詳細(xì)解析

 更新時間：2013年12月04日 09:54:43   作者：  
以下就是被我已知忽略的問題和解決方案，當(dāng)我發(fā)覺這個問題的時候，冒出了一身冷汗，幸虧做了嚴(yán)格的服務(wù)器端驗(yàn)證，不然可就慘了

一、事件

這是一個長期被我忽略或者是沒有發(fā)現(xiàn)的問題，問題是這樣的：

在一個頁面中，當(dāng)有驗(yàn)證控件的時候，當(dāng)Button控件觸發(fā)OnClientClick事件，并且這個事件會返回true和false的時候，驗(yàn)證控件就會失效，不起作用了。具體描述如下：

.Net頁面如下：

復(fù)制代碼 代碼如下:

<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驗(yàn)證控件，使TextBoxTest的值不能為空，在ButtonText提交頁面時，要用戶確認(rèn)是否需要提交。很簡單的一個頁面，貌似也沒有什么問題?？墒钱?dāng)TextBoxTest的值為空的時候，驗(yàn)證控件竟然不起作用，提交頁面成功。這是什么原因呢？

二、響應(yīng)事件

這是怎么回事呢？首先我將ButtonTest的OnClientClick事件去掉后，驗(yàn)證控件是起作用的。這又是為什么呢？我查看了頁面的源代碼，發(fā)現(xiàn)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" />

從這行源代碼可以看出，驗(yàn)證控件在客戶端生成了一段javascript代碼，驗(yàn)證TextBox中的值是否為空。當(dāng)我加上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" />

從這行代碼中，可以非常清楚的看到問題處在什么地方了，在客戶端，首先執(zhí)行的是自定義的javascript，然后在執(zhí)行驗(yàn)證控件生成的這一段javascript，顯然，在這種情況下，驗(yàn)證控件就失去任何意義了。

三、響應(yīng)控件

知道了問題處在什么地方，就好辦了，我的解決辦法是：在執(zhí)行自定義的javascript（return confirm('你確定要提交嗎？‘）前 ，就要驗(yàn)證頁面中的控件是否符合規(guī)則，于是我將ButtonTest的OnClientClick事件修改如下：

復(fù)制代碼 代碼如下:

<asp:Button ID="ButtonText" runat="server" Text="測試" OnClientClick="if(CheckClientValidate()) return Confirm('你確定要提交頁面嗎？');" />

CheckClientValidate()方法的代碼如下：
復(fù)制代碼 代碼如下:

<script language="javascript" type="text/javascript">
function CheckClientValidate(){ 
   Page_ClientValidate();
   if (Page_IsValid){
   return true;
   }else{
   return false;
   }
 }
</script>

運(yùn)行，測試。驗(yàn)證控件發(fā)揮作用。問題解決。

四、后記

這就是被我已知忽略的問題和解決方案，當(dāng)我發(fā)覺這個問題的時候，冒出了一身冷汗，幸虧做了嚴(yán)格的服務(wù)器端驗(yàn)證，不然可就慘了。從這里也可以看出指定嚴(yán)格的服務(wù)器端驗(yàn)證是多么的有必要啊:-)。它不僅可以防止”黑客“繞過客戶端驗(yàn)證，還可以防止因?yàn)樽约簺]有發(fā)覺的錯誤，造成數(shù)據(jù)的不準(zhǔn)確。

注：

Page_ClientValidate(),本函數(shù)用于在包含微軟驗(yàn)證控件的aspx頁面中，根據(jù)用戶輸入操作是否合法,返回True或者False

可直接判斷。

復(fù)制代碼 代碼如下:

 if(Page_ClientValidate())
 {
 return true;
 }
 else
 {
 return false;
 }

相關(guān)文章

  • javascript實(shí)現(xiàn)的白板效果(可以直接在網(wǎng)頁上寫字)

    javascript實(shí)現(xiàn)的白板效果(可以直接在網(wǎng)頁上寫字)

    javascript動畫系列之網(wǎng)頁白板 javascript實(shí)現(xiàn)的白板(兼容ff,ie,chrome,……)
    2010-07-07
  • echart中tooltip自動展示代碼示例

    echart中tooltip自動展示代碼示例

    這篇文章主要給大家介紹了關(guān)于echart中tooltip自動展示的相關(guān)資料,ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫,提供直觀，生動,可交互,可個性化定制的數(shù)據(jù)可視化圖表,需要的朋友可以參考下
    2023-09-09
  • csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)

    csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)

    有時候因?yàn)閏sdn的博客經(jīng)常處理一些字符，導(dǎo)致代碼很多情況下，都不能正常運(yùn)行，給大家的閱讀帶來了麻煩，下面是腳本之家編輯簡單的整理下。
    2009-08-08
  • JavaScript如何利用Promise控制并發(fā)請求個數(shù)

    JavaScript如何利用Promise控制并發(fā)請求個數(shù)

    大家都知道js是單線程，并不存在真正的并發(fā)，但是由于JavaScript的Event Loop機(jī)制，使得異步函數(shù)調(diào)用有了“并發(fā)”這樣的假象。這篇文章主要給大家介紹了關(guān)于JavaScript如何利用Promise控制并發(fā)請求個數(shù)的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • js如何根據(jù)id刪除數(shù)組中對象

    js如何根據(jù)id刪除數(shù)組中對象

    這篇文章主要介紹了js如何根據(jù)id刪除數(shù)組中對象的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • JS+CSS3制作炫酷的彈窗效果

    JS+CSS3制作炫酷的彈窗效果

    本文給大家分享使用js和css3制作的炫酷彈窗效果，整個背景模糊，要比純色加透明度高大上好多。對js彈窗效果感興趣的朋友一起學(xué)習(xí)吧
    2016-11-11
  • javascript復(fù)制粘貼與clipboardData的使用

    javascript復(fù)制粘貼與clipboardData的使用

    window.clipboardData可以實(shí)現(xiàn)復(fù)制與粘貼的操作，下面有個小示例，想學(xué)習(xí)的朋友可以參考下
    2014-10-10
  • js的對象與函數(shù)詳解

    js的對象與函數(shù)詳解

    今天小編就為大家分享一篇關(guān)于js的對象與函數(shù)詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 惰性函數(shù)定義模式 使用方法

    惰性函數(shù)定義模式 使用方法

    惰性函數(shù)定義模式 使用方法...
    2007-09-09
  • 微信小程序API—獲取定位的詳解

    微信小程序API—獲取定位的詳解

    這篇文章主要介紹了微信小程序API獲取定位，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論