要求:表单中用了验证控件,如何能在验证控件的客户端脚本验证成功之后,执行一段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中“查看源文件”
生成下面这些关键代码(摘录关键的几行):
...
<form name="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代码。{i