65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 JavaScript 调用 ASP.NET 验证器

GaryWoodfine
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.94/5 (14投票s)

2006年8月29日

CPOL

5分钟阅读

viewsIcon

117778

downloadIcon

2

解释如何使用 JavaScript 调用 ASP.NET 验证控件。

引言

下面的代码示例将说明一种使用内置 ASP.NET 验证控件通过客户端 JavaScript 执行验证的方法，从而最大限度地减少了对服务器回发的需要，在某些情况下这可能是可取的。

背景

在内网应用程序中，通常需要对控件执行一些客户端验证，并且经常出现这种情况，即使没有回发到服务器，也需要一些客户端验证。开发人员常常认为他们被迫编写自己的 JavaScript 例程来验证表单，而不是使用内置的 .NET 验证控件，因为人们普遍误认为 .NET 控件要求您执行表单回发才能使验证控件起作用，但这并非总是如此，我将在本文中尝试说明这一点。

ASP.NET 验证控件

为了完整理解本文的内容，简要快速地了解 ASP.NET 验证控件的基础知识非常重要。

对这些控件进行完整详细的讨论超出了本文的范围。但是，我推荐 Paul Riley 的一篇优秀文章，它会更好地解释它们（ASP.NET 验证器解惑）。

在页面上添加 ASP.NET 验证控件时，注意后台实际发生的事情很重要。下面的代码段是一个非常简单的.aspx页面，我在其中放置了

  • 一个TextBox，
  • 一个RequiredFieldValidator，以及
  • 一个 HTML 输入按钮。
示例源代码
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
        runat="server" ErrorMessage="Please enter your name"
        ControlToValidate="txtName">Please enter your name
       </asp:RequiredFieldValidator>
        <input id="btnSubmit" type="button" value="Submit" 
        onclick="btnClick();" /></div>
    </form>
</body>

HTML 按钮是一个普通按钮，未标记为runat="server"。这是为了证明单击按钮时不会发生回发，所有执行的代码都是客户端代码。

生成并运行项目（按 F5），一旦浏览器显示页面，右键单击页面并在弹出菜单中选择查看源文件。我们可以查看发送到浏览器进行渲染的源代码，您会注意到，我们添加到页面中的代码突然夹杂着大量的 JavaScript 和似乎是一大堆引用。

示例浏览器代码
<title>
    Untitled Page
</title>
    <form id="form1" onsubmit="javascript:return WebForm_OnSubmit();" 
          action="Default.aspx" method="post" name="form1">
<div>
<input type="hidden" value="/wEPDwULLTE3MjY4OTM0ODdkZBBtfFkhOouaI5cJhXqU0SHTVGve" 
       id="__VIEWSTATE" name="__VIEWSTATE" />
</div>
<script type="text/javascript" src="http://www.url.com/WebResource.axd?>
        d=H4m0PoTesQdB9lKFN1FufuopKIOshOyuuCIRa0LMLs01&t=633043055884218750"
</script>
<script type="text/javascript">
<!--
function WebForm_OnSubmit() {
  if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) 
    return false;
  return true;
}
// -->

</script>
    <div>
        <input type="text" id="txtName" name="txtName" />
        Please enter your name
        <input type="button" value="button" id="btnSubmit" /></div>
    <script type="text/javascript">
<!--
var Page_Validators = 
        new Array(document.getElementById("RequiredFieldValidator1"));
// -->

</script>
<script type="text/javascript">
<!--
var RequiredFieldValidator1 = document.all ? 
  document.all["RequiredFieldValidator1"] : 
  document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "txtName";
RequiredFieldValidator1.errormessage = "Please enter your name";
RequiredFieldValidator1.evaluationfunction = 
    "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
// -->

</script>
<div>
    <input type="hidden" 
           value="/wEWAgK8gZK6AgLEhISFC5vgLcVhHaEw9NErRfhz95wU9Ui/" 
        id="__EVENTVALIDATION" name="__EVENTVALIDATION" />
</div>
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}
function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
// -->

</script>
</form>

在此处上述代码中要注意的关键点是，在客户端验证方面，区分通过 2.0 和 1.1 渲染的客户端代码非常简单。如果您仔细查看上面的源代码，您会注意到我用粗体突出显示了一行。此行包含对 Web 资源文件的引用，这是 .NET Framework 2.0 中新增的功能。许多内置的 ASP.NET 服务器控件需要额外的外部资源才能正常工作；这包括验证控件。验证控件依赖于大量 JavaScript 函数来执行其客户端验证。控件可以直接将自己的 JavaScript 发送到页面的内容中。更有效的方法是将这些 JavaScript 函数打包到一个外部 JavaScript 文件中，然后将该文件包含在页面中。粗体显示的行说明了如何实现这一点。这减少了总页面大小，并允许浏览器缓存外部 JavaScript 文件。

在 .NET Framework 1.1 中，这些外部资源必须作为文件系统上的实际文件来实现，以便访问者的浏览器可以访问它们。如果 1.1 Framework 安装在您的系统上，您可能想访问%SystemRoot%\Inetpub\wwwroot\aspnet_client\system_web\1_1_4322\WebUIValidation.js。

尽管对使用嵌入式资源的优势进行完整讨论超出了本文的范围，但我还是敦促读者进一步研究此主题，因为它包含一些有趣的内容，并且可以学到一些有用的编码技术。

如何劫持验证控件

在包含的 Web 资源和WebUIValidation.js中，有一个我们需要调用的方法，即Page_ClientValidate，该方法用于测试所有控件是否都满足分配给它们的验证条件。

示例

废话不多说，这是我的解决方案。如果我们向页面添加自己的 JavaScript 块，就像下面详细介绍的那样。

完整源代码

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
     function btnClick()
        {
        if (Page_ClientValidate() == true)
            {
                var sName = document.getElementById('txtName').value;
                alert('Thank you ' + sName + ' I feel validated!');
             }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
          runat="server" ErrorMessage="Please enter your name" 
          ControlToValidate="txtName">Please enter your name
         </asp:RequiredFieldValidator>
        <input id="btnSubmit" type="button" value="Submit" 
           onclick="btnClick();" /></div>
    </form>
</body>
</html>

如上面的示例代码所示，我设置了一个表单，其中包含一个 .NET TextBox控件，并将一个 .NET RequiredFieldValidator分配给TextBox。然后，我向表单添加了一个普通的 HTML 按钮，并将其onclick方法指向了 JavaScript 代码。

JavaScript

function btnClick()
{
    if (Page_ClientValidate() == true)
    {
       var sName = document.getElementById('txtName').value;
       alert('Thank you ' + sName + ' I feel validated!');
    }
}

运行应用程序，瞧，您就有了：无需回发即可进行客户端验证。

结论

使用上面的代码片段，您可以执行所需的任何客户端函数，而无需编写自己的验证方法来检查字段是否已正确填写。

注意事项

正如本教程下方讨论板中的评论中所述，这不是执行 Web 开发所有方面验证的完整指南，而仅仅是说明如何通过客户端脚本访问验证控件。在某些情况下，此代码可能很有用，并且不应将其应用于所有验证场景。但是，对数据验证进行完整讨论并非本文的预期范围，我将留给读者自行判断。

© . All rights reserved.