欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » ASP.Net » 正文

热门阅读

如何在ASP.NET验证控件客户端验证成功或失败之后再执行js脚本

创建时间:2011年07月29日 14:07  阅读次数:(5964)
分享到:
要求:表单中用了验证控件,如何能在验证控件的客户端脚本验证成功之后,执行一段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
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 73+71=? 的结果(结果是:144)
结  果: