驗(yàn)證控件與Button的OnClientClick事件詳細(xì)解析
一、事件
這是一個(gè)長(zhǎng)期被我忽略或者是沒(méi)有發(fā)現(xiàn)的問(wèn)題，問(wèn)題是這樣的：
在一個(gè)頁(yè)面中，當(dāng)有驗(yàn)證控件的時(shí)候，當(dāng)Button控件觸發(fā)OnClientClick事件，并且這個(gè)事件會(huì)返回true和false的時(shí)候，驗(yàn)證控件就會(huì)失效，不起作用了。具體描述如下：
.Net頁(yè)面如下：
<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="測(cè)試" OnClientClick="return confirm('你確定要提交嗎？');" />
</div>
</form>
如上，在頁(yè)面中加入RequireFieldValidator驗(yàn)證控件，使TextBoxTest的值不能為空，在ButtonText提交頁(yè)面時(shí)，要用戶確認(rèn)是否需要提交。很簡(jiǎn)單的一個(gè)頁(yè)面，貌似也沒(méi)有什么問(wèn)題?？墒钱?dāng)TextBoxTest的值為空的時(shí)候，驗(yàn)證控件竟然不起作用，提交頁(yè)面成功。這是什么原因呢？
二、響應(yīng)事件
這是怎么回事呢？首先我將ButtonTest的OnClientClick事件去掉后，驗(yàn)證控件是起作用的。這又是為什么呢？我查看了頁(yè)面的源代碼，發(fā)現(xiàn)ButtonTest控件生成如下源代碼：
<input type="submit" name="ButtonText" value="測(cè)試" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ButtonText", "", true, "", "", false, false))" id="ButtonText" />
從這行源代碼可以看出，驗(yàn)證控件在客戶端生成了一段javascript代碼，驗(yàn)證TextBox中的值是否為空。當(dāng)我加上ButtonTest的OnClientClick后，我重新查看了源代碼，ButtonTest控件生成的源代碼如下：
<input type="submit" name="ButtonText" value="測(cè)試" onclick="return confirm('你確定要提交嗎？');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ButtonText", "", true, "", "", false, false))" id="ButtonText" />
從這行代碼中，可以非常清楚的看到問(wèn)題處在什么地方了，在客戶端，首先執(zhí)行的是自定義的javascript，然后在執(zhí)行驗(yàn)證控件生成的這一段javascript，顯然，在這種情況下，驗(yàn)證控件就失去任何意義了。
三、響應(yīng)控件
知道了問(wèn)題處在什么地方，就好辦了，我的解決辦法是：在執(zhí)行自定義的javascript（return confirm('你確定要提交嗎？‘）前 ，就要驗(yàn)證頁(yè)面中的控件是否符合規(guī)則，于是我將ButtonTest的OnClientClick事件修改如下：
<asp:Button ID="ButtonText" runat="server" Text="測(cè)試" OnClientClick="if(CheckClientValidate()) return Confirm('你確定要提交頁(yè)面嗎？');" />
CheckClientValidate()方法的代碼如下：
<script language="javascript" type="text/javascript">
function CheckClientValidate(){
Page_ClientValidate();
if (Page_IsValid){
return true;
}else{
return false;
}
}
</script>
運(yùn)行，測(cè)試。驗(yàn)證控件發(fā)揮作用。問(wèn)題解決。
四、后記
這就是被我已知忽略的問(wèn)題和解決方案，當(dāng)我發(fā)覺(jué)這個(gè)問(wèn)題的時(shí)候，冒出了一身冷汗，幸虧做了嚴(yán)格的服務(wù)器端驗(yàn)證，不然可就慘了。從這里也可以看出指定嚴(yán)格的服務(wù)器端驗(yàn)證是多么的有必要啊:-)。它不僅可以防止”黑客“繞過(guò)客戶端驗(yàn)證，還可以防止因?yàn)樽约簺](méi)有發(fā)覺(jué)的錯(cuò)誤，造成數(shù)據(jù)的不準(zhǔn)確。
注：
Page_ClientValidate(),本函數(shù)用于在包含微軟驗(yàn)證控件的aspx頁(yè)面中，根據(jù)用戶輸入操作是否合法,返回True或者False
可直接判斷。
if(Page_ClientValidate())
{
return true;
}
else
{
return false;
}
- jQuery Validate 驗(yàn)證,校驗(yàn)規(guī)則寫(xiě)在控件中的具體實(shí)例
- ASP.NET jQuery 實(shí)例16 通過(guò)控件CustomValidator驗(yàn)證RadioButtonList
- ASP.NET jQuery 實(shí)例15 通過(guò)控件CustomValidator驗(yàn)證CheckBoxList
- 使用jQuery.Validate進(jìn)行客戶端驗(yàn)證（初級(jí)篇） 不使用微軟驗(yàn)證控件的理由
- 基于jquery實(shí)現(xiàn)的服務(wù)器驗(yàn)證控件的啟用和禁用代碼
- 教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
- js控制.net驗(yàn)證控件是否可用。
- fileupload控件 文件類型客戶端驗(yàn)證實(shí)現(xiàn)代碼
- asp.net MaxLengthValidator 最大長(zhǎng)度驗(yàn)證控件代碼
- jQuery密碼強(qiáng)度驗(yàn)證控件使用詳解
相關(guān)文章
javascript實(shí)現(xiàn)的白板效果(可以直接在網(wǎng)頁(yè)上寫(xiě)字)
javascript動(dòng)畫(huà)系列之網(wǎng)頁(yè)白板 javascript實(shí)現(xiàn)的白板(兼容ff,ie,chrome,……)2010-07-07
這篇文章主要給大家介紹了關(guān)于echart中tooltip自動(dòng)展示的相關(guān)資料,ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù),提供直觀，生動(dòng),可交互,可個(gè)性化定制的數(shù)據(jù)可視化圖表,需要的朋友可以參考下2023-09-09
csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)
有時(shí)候因?yàn)閏sdn的博客經(jīng)常處理一些字符，導(dǎo)致代碼很多情況下，都不能正常運(yùn)行，給大家的閱讀帶來(lái)了麻煩，下面是腳本之家編輯簡(jiǎn)單的整理下。2009-08-08
JavaScript如何利用Promise控制并發(fā)請(qǐng)求個(gè)數(shù)
大家都知道js是單線程，并不存在真正的并發(fā)，但是由于JavaScript的Event Loop機(jī)制，使得異步函數(shù)調(diào)用有了“并發(fā)”這樣的假象。這篇文章主要給大家介紹了關(guān)于JavaScript如何利用Promise控制并發(fā)請(qǐng)求個(gè)數(shù)的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了js如何根據(jù)id刪除數(shù)組中對(duì)象的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本文給大家分享使用js和css3制作的炫酷彈窗效果，整個(gè)背景模糊，要比純色加透明度高大上好多。對(duì)js彈窗效果感興趣的朋友一起學(xué)習(xí)吧2016-11-11
javascript復(fù)制粘貼與clipboardData的使用
window.clipboardData可以實(shí)現(xiàn)復(fù)制與粘貼的操作，下面有個(gè)小示例，想學(xué)習(xí)的朋友可以參考下2014-10-10
今天小編就為大家分享一篇關(guān)于js的對(duì)象與函數(shù)詳解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
惰性函數(shù)定義模式 使用方法...2007-09-09
這篇文章主要介紹了微信小程序API獲取定位，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04