驗證控制項與Button的OnClientClick事件詳細解析_javascript技巧

一、事件

這是一個長期被我忽略或是沒有發現的問題，問題是這樣的：

在一個頁面中，當有驗證控制項的時候，當Button控制項觸發OnClientClick事件，而這個事件會回傳true和false的時候，驗證控制項就會失效，不起作用了。具體描述如下：

.Net頁如下：

複製程式碼 程式碼如下:

ErrorMessage="可能為空白" Display= "None">ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" runat="server">
="RequiredFieldValidator1" runat="server">
="RequiredFieldValidator1" runat="server">
="ButtonText" runat="server" Text="測試" OnClientClick="return confirm('你確定要提交嗎？');" />

如上，在頁面中加入RequireFieldValidator驗證控件，使TextBoxTest的值不能為空，在ButtonText提交頁面時，要使用者確認是否需要提交。很簡單的一個頁面，看起來也沒有什麼問題。可是當TextBoxTest的值為空的時候，驗證控制項竟然不起作用，提交頁面成功。這是什麼原因呢？

二、回應事件

這是怎麼回事？首先我將ButtonTest的OnClientClick事件去掉後，驗證控制項是起作用的。這又是為什麼呢？我查看了頁面的源代碼，發現ButtonTest控制項產生如下原始碼：

從這行原始碼可以看出，驗證控制項在客戶端產生了一段javascript程式碼，驗證TextBox中的值是否為空。當我加上ButtonTest的OnClientClick後，我重新查看了原始程式碼，ButtonTest控制項產生的原始碼如下：

從這行程式碼中，可以非常清楚的看到問題處在什麼地方了，在客戶端，首先執行的是自訂的javascript，然後在執行驗證控制項產生的這一段javascript，顯然，在這種情況下，驗證控制就失去任何意義了。

三、回應控制

知道了問題處在什麼地方，就好辦了，我的解決辦法是：在執行自訂的javascript（return confirm('你確定要提交嗎？'）前，就要驗證頁面中的控件是否符合規則，所以我將ButtonTest的OnClientClick事件修改如下：

複製程式碼

程式碼如下:

CheckClientValidate()方法的程式碼如下：

複製程式碼複製程式碼

複製程式碼



🎜>

 }
実行、テスト。検証コントロールが機能します。問題は解決しました。

4.追記

これは私が無視すべき問題と解決策であると知っていましたが、この問題を発見したとき、私は冷や汗をかきました。そうでないと悲惨なことになるでしょう。ここから、厳密なサーバー側検証を指定することがいかに必要であるかもわかります :-)。これにより、「ハッカー」がクライアントの検証を回避することを防ぐだけでなく、自分自身が気付かないエラーによって引き起こされるデータの不正確性も防ぐことができます。

注:

Page_ClientValidate()、この関数は Microsoft 検証コントロールを含む aspx ページで使用され、ユーザー入力操作が正当かどうかに応じて True または False を返します

直接判断できる。

コードをコピー コードは次のとおりです:

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