驗(yàn)證控件與Button的OnClientClick事件詳細(xì)解析
一、事件
這是一個(gè)長期被我忽略或者是沒有發(fā)現(xiàn)的問題，問題是這樣的：
在一個(gè)頁面中，當(dāng)有驗(yàn)證控件的時(shí)候，當(dāng)Button控件觸發(fā)OnClientClick事件，并且這個(gè)事件會返回true和false的時(shí)候，驗(yàn)證控件就會失效，不起作用了。具體描述如下：
.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驗(yàn)證控件，使TextBoxTest的值不能為空，在ButtonText提交頁面時(shí)，要用戶確認(rèn)是否需要提交。很簡單的一個(gè)頁面，貌似也沒有什么問題?？墒钱?dāng)TextBoxTest的值為空的時(shí)候，驗(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("ButtonText", "", true, "", "", 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("ButtonText", "", true, "", "", false, false))" id="ButtonText" />
從這行代碼中，可以非常清楚的看到問題處在什么地方了，在客戶端，首先執(zhí)行的是自定義的javascript，然后在執(zhí)行驗(yàn)證控件生成的這一段javascript，顯然，在這種情況下，驗(yàn)證控件就失去任何意義了。
三、響應(yīng)控件
知道了問題處在什么地方，就好辦了，我的解決辦法是：在執(zhí)行自定義的javascript（return confirm('你確定要提交嗎？‘）前 ，就要驗(yàn)證頁面中的控件是否符合規(guī)則，于是我將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>
運(yùn)行，測試。驗(yàn)證控件發(fā)揮作用。問題解決。
四、后記
這就是被我已知忽略的問題和解決方案，當(dāng)我發(fā)覺這個(gè)問題的時(shí)候，冒出了一身冷汗，幸虧做了嚴(yán)格的服務(wù)器端驗(yàn)證，不然可就慘了。從這里也可以看出指定嚴(yán)格的服務(wù)器端驗(yàn)證是多么的有必要啊:-)。它不僅可以防止”黑客“繞過客戶端驗(yàn)證，還可以防止因?yàn)樽约簺]有發(fā)覺的錯(cuò)誤，造成數(shù)據(jù)的不準(zhǔn)確。
注：
Page_ClientValidate(),本函數(shù)用于在包含微軟驗(yàn)證控件的aspx頁面中，根據(jù)用戶輸入操作是否合法,返回True或者False
可直接判斷。
if(Page_ClientValidate())
{
return true;
}
else
{
return false;
}
- jQuery Validate 驗(yàn)證,校驗(yàn)規(guī)則寫在控件中的具體實(shí)例
- ASP.NET jQuery 實(shí)例16 通過控件CustomValidator驗(yàn)證RadioButtonList
- ASP.NET jQuery 實(shí)例15 通過控件CustomValidator驗(yàn)證CheckBoxList
- 使用jQuery.Validate進(jìn)行客戶端驗(yàn)證（初級篇） 不使用微軟驗(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 最大長度驗(yàn)證控件代碼
- jQuery密碼強(qiáng)度驗(yàn)證控件使用詳解
相關(guān)文章
Javascript 判斷客戶端是否為 PC 還是手持設(shè)備，有時(shí)候項(xiàng)目中需要用到，很方便的檢測，源生的哦，方法一共有兩種2014-04-04
這篇文章主要介紹了JS重載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript重載的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-12-12
這篇文章主要給大家分享了20個(gè)JavaScript?單行代碼,JavaScript單行代碼殺手锏，可以讓工作更有效率哦,需要的朋友可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
讓多個(gè)輸入框中的內(nèi)容同時(shí)變化的js代碼
怎么樣讓多個(gè)輸入框中的內(nèi)容同時(shí)變化？一般又要兼容IE與firefox2010-01-01
javascript Three.js創(chuàng)建文字初體驗(yàn)
這篇文章主要為大家介紹了Three.js創(chuàng)建文字初體驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
JavaScript利用生成器函數(shù)實(shí)現(xiàn)優(yōu)雅處理異步任務(wù)流
Generators?是?JavaScript?中的一種特殊函數(shù)，它們可以暫停執(zhí)行并根據(jù)需要生成多個(gè)值,本文將詳細(xì)介紹?generators?的作用、用法以及與其他語言特性的配合使用,希望對大家有所幫助2023-07-07
js獲取數(shù)組最后一位元素的五種方法及執(zhí)行效率對比
js獲取數(shù)組最后一位元素的五種方法代碼示例,使用console.time和console.timeEnd測量javascript腳本程序執(zhí)行效率對比2023-08-08
本文主要介紹了js仿淘寶商品放大預(yù)覽功能的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
layui 對彈窗 form表單賦值的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui 對彈窗 form表單賦值的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS封裝通過className獲取元素的函數(shù),涉及javascript針對頁面元素屬性的遍歷與數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2016-12-12