ASP.NET验证控件客户端验证成功或失败之后执行js脚本(转)

来源：互联网发布：iphone7还原网络设置编辑：程序博客网时间：2024/05/20 04:48

要求：表单中用了验证控件，如何能在验证控件的客户端脚本验证成功之后，执行一段js脚本，比如弹出确认框，然后再提交，点取消则不提交。如果验证控件没通过，比如用户没填名字的话，不会提交。
网上看了一些文章，有的说不可能，有的则是使用服务端代码，需要提交页面后才能正确执行。

下面的代码的测试环境是VS.NET2008+IE8，没有后台代码：
原理：ASP.NET验证控件在生成网页的时候会变成一大堆的客户端 Javascript 脚本，用来在客户端验证。
1. 先敲入以下代码（ValidateControl.aspx）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidateControl.aspx.cs" Inherits="ValidateControl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 false;

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代码。