天天看点
返回

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

要求：表单中用了验证控件，如何能在验证控件的客户端脚本验证成功之后，执行一段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" οnsubmit="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" οnsubmit="return confirm('确认提交数据吗？');">

你可以通过这种方式插入自己想要的js代码。
asp.net 脚本 webform textbox server javascript
上一篇: unity手游实现方向盘效果（转动、回转、角度限制）
下一篇: asp.net上传图片汇总

继续阅读