ASP.NET驗證控制元件客戶端驗證成功或失敗之後執行js指令碼(轉)
阿新 • • 發佈：2019-02-17
要求：表單中用了驗證控制元件，如何能在驗證控制元件的客戶端指令碼驗證成功之後，執行一段js指令碼，比如彈出確認框，然後再提交，點取消則不提交。如果驗證控制元件沒通過，比如使用者沒填名字的話，不會提交。
網上看了一些文章，有的說不可能，有的則是使用服務端程式碼，需要提交頁面後才能正確執行。
下面的程式碼的測試環境是VS.NET2008+IE8，沒有後臺程式碼：
原理：ASP.NET驗證控制元件在生成網頁的時候會變成一大堆的客戶端 Javascript 指令碼，用來在客戶端驗證。
1. 先敲入以下程式碼（ValidateControl.aspx）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidateControl.aspx.cs" Inherits="ValidateControl" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>驗證控制元件，成功後確認是否提交資料</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="使用者名稱："></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="使用者名稱必須輸入！"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="提交" />
</div>
</form>
</body>
</html>
2. 執行該頁面，在IE中“檢視原檔案”
生成下面這些關鍵程式碼（摘錄關鍵的幾行）：
...
<formname="form1" method="post" action="ValidateControl.aspx" language="javascript" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
...
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return
return true;
}
可以看出form1表單是通過WebForm_OnSubmit函式驗證，如果返回false則表示失敗，不提交資料；true提交資料
而WebForm_OnSubmit函式又是呼叫ValidatorOnSubmit函式來執行驗證的，ValidatorOnSubmit返回false表示驗證失敗。
3. 利用ValidatorOnSubmit函式驗證控制元件
回到第一步最初的程式碼，將<form id="form1" runat="server">改成：
<form id="form1" runat="server" onsubmit="if(ValidatorOnSubmit() == true) return confirm('確認提交資料嗎？');">
再次執行ValidateControl.aspx頁面,實現了最初的目的。
再次在IE中“檢視原始檔”WebForm_OnSubmit函式被改成了：
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;if
(ValidatorOnSubmit() == true) return confirm('確認提交資料嗎？');
return true;
}
基於以上原理，還可以把程式碼簡化為：
<form id="form1" runat="server" onsubmit="return confirm('確認提交資料嗎？');">
你可以通過這種方式插入自己想要的js程式碼。
網上看了一些文章，有的說不可能，有的則是使用服務端程式碼，需要提交頁面後才能正確執行。
下面的程式碼的測試環境是VS.NET2008+IE8，沒有後臺程式碼：
原理：ASP.NET驗證控制元件在生成網頁的時候會變成一大堆的客戶端 Javascript 指令碼，用來在客戶端驗證。
1. 先敲入以下程式碼（ValidateControl.aspx）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidateControl.aspx.cs" Inherits="ValidateControl" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>驗證控制元件，成功後確認是否提交資料</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="使用者名稱："></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="使用者名稱必須輸入！"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="提交" />
</div>
</form>
</body>
</html>
2. 執行該頁面，在IE中“檢視原檔案”
生成下面這些關鍵程式碼（摘錄關鍵的幾行）：
...
<formname="form1" method="post" action="ValidateControl.aspx" language="javascript" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
...
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return
return true;
}
可以看出form1表單是通過WebForm_OnSubmit函式驗證，如果返回false則表示失敗，不提交資料；true提交資料
而WebForm_OnSubmit函式又是呼叫ValidatorOnSubmit函式來執行驗證的，ValidatorOnSubmit返回false表示驗證失敗。
3. 利用ValidatorOnSubmit函式驗證控制元件
回到第一步最初的程式碼，將<form id="form1" runat="server">改成：
<form id="form1" runat="server" onsubmit="if(ValidatorOnSubmit() == true) return confirm('確認提交資料嗎？');">
再次執行ValidateControl.aspx頁面,實現了最初的目的。
再次在IE中“檢視原始檔”WebForm_OnSubmit函式被改成了：
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;if
(ValidatorOnSubmit() == true) return confirm('確認提交資料嗎？');
return true;
}
基於以上原理，還可以把程式碼簡化為：
<form id="form1" runat="server" onsubmit="return confirm('確認提交資料嗎？');">
你可以通過這種方式插入自己想要的js程式碼。