如何使用 JavaScript 验证表单

Paul S McCarthy

2.00/5 (2投票s)

2007 年 4 月 10 日

CPOL

5分钟阅读

32370

122

本文详细介绍了如何以非侵入式的方式使用 JavaScript 验证表单。

下载示例 - 3.24 KB

引言

服务器端验证是验证表单的唯一可靠方法。出于以下原因，应避免仅使用客户端 JavaScript 进行验证：

设备可能没有 JavaScript
用户可能关闭了 JavaScript
管理员可能在网络上禁用了 JavaScript

除了确保所有表单都在服务器上得到验证之外，您还可以使用 JavaScript 来验证表单。重复验证表单并非浪费时间，因为我们可以使用 JavaScript 以非侵入式的方式增强表单的可用性。非侵入式 JavaScript 将在 JavaScript 可用时阻止表单提交，并加快表单提交过程。由于 JavaScript 是客户端的，如果表单提交时出现错误，用户不必等待页面重新加载（这对于连接速度慢的用户尤其有用）。

为了让您了解我们的目标，请查看此功能齐全的示例。

本教程资源

在开始本教程之前，请下载示例。

首先打开文件validate-forms-with-javascript.htm。这是我们将使用 JavaScript 使其更易用和更具吸引力的表单的示例部分。

入门

我们要验证的表单只有两个必填字段。

电子邮件
您觉得这篇文章有用吗？

这两个字段都是表单提交所必需的。创建此表单的HTML方式如下。

<html>
<head>
<title>Webcredible - JavaScript tutorial - form validation</title>
<style type="text/css">@import "css.css";</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<form action="#">
<ul>
<li><label for="email">E-mail <img src="req.gif" alt="Required" /></label>
<input class="reqemail" id="email" value="" /></li>
<li><label for="question">How useful did you find 
this article? <img src="req.gif" alt="Required" /></label>
<input class="reqquestion" id="question" value="" /></li>
</ul>
<input type="submit" value="Submit form" />
</form>
</body>
</html>

通过在 <label> 标签中插入带有 alt="required" 的图像来标记字段为必填。

用于测试的 onsubmit

最初，我们还将插入一个 onsubmit 事件，并调用我们的表单验证脚本。这将有助于我们在 JavaScript 开发过程中测试页面。它将在本文结尾被删除，并将一个函数调用分配给表单本身，使用 JavaScript。

我们将插入HTML额外代码，如下所示。

<form onSubmit="validateForms()" action="#">

JavaScript

我们将创建一个名为 js.js 的 JavaScript 文件。我们在 onsubmit 命令上调用的函数名为 validateForms()，因此我们首先在 js.js 文件的开头创建该空函数。

function validateForms()
{
}

validateForms() 函数是用于控制表单如何验证的根函数。然后，验证脚本将应用于所有表单。让我们先获取页面上任何表单的HTML对象集合。HTML页面

function validateForms()
{
    if (!document.getElementsByTagName) return false;
    elementsForms = document.getElementsByTagName("form");
}

循环

验证过程的下一步是循环遍历表单并验证它们。所有表单都将以相同的方式处理。我们将使用 for 循环来遍历HTML对象集合，并将每个表单传递给一个名为 validateForm() 的新函数。

function validateForms()
{
    if (!document.getElementsByTagName) return false;
    elementsForms = document.getElementsByTagName("form");
    for (var intCounter = 0; intCounter < elementsForms.length; intCounter++)
    {
        validateForm(elementsForms[intCounter])
    }
}
function validateForm(currentForm)
{
}

任务顺序

此时，停下来思考我们可能如何实现 JavaScript 验证可能很有用。如果我们回到表单HTML，您当然会注意到，我们已将一个类应用于每个必需的 <input>。

<li><label for="email">E-mail <img src="https://codeproject.org.cn/i/req.gif" alt="Required" />
</label><input class="reqemail" id="email" value="" /></li>

电子邮件 <input> 已分配 class="reqemail"，问题 <input> 已分配 class="reqquestion"。这些将用于向 JavaScript 标识 <input> 需要验证，并定义它们需要哪种类型的验证。我们现在可以使用 getElementsByTagName 来访问每个 input 上的类定义。当我们在文章开头使用 getElementsByTagName 创建表单集合时，我们将整个文档作为其父级。

elementsForms = document.getElementsByTagName("form");

我们还可以获取传递给 validateForm(currentForm) 函数的表单所包含的所有 <input>。

function validateForm(currentForm)
{
    var blnvalidate = true; var elementsInputs;
    elementsInputs = currentForm.getElementsByTagName("input");
}

下一步是像我们在文章开头处理表单一样循环遍历 <input>。

function validateForm(currentForm)
{
    var blnvalidate = true; var elementsInputs;
    elementsInputs = currentForm.getElementsByTagName("input");
    for (var intCounter = 0; intCounter < elementsInputs.length; intCounter++) { }
}

此函数中的最后一步是编写一个 if 语句，该语句识别必需的类名并验证该 <input> 字段。

if (elementsInputs[intCounter].className == "reqemail")
{
    if (validateEmail(elementsInputs, intCounter))
    { alert('Please insert a valid email'); }
}

完成的函数应如下所示：

function validateForm(currentForm)
{
    var blnvalidate = true; var elementsInputs;
    elementsInputs = currentForm.getElementsByTagName("input");
    for (var intCounter = 0; intCounter < elementsInputs.length; intCounter++)
    {
        if (elementsInputs[intCounter].className == "reqquestion")
        {
            if (validateText(elementsInputs, intCounter))
            {
                blnvalidate = true;
                alert('You have not let us know what you think of the article');
            }
        }
        else if (elementsInputs[intCounter].className == "reqemail")
        {
            if (validateEmail(elementsInputs, intCounter))
            {
                blnvalidate = true; alert('Please insert a valid email');
            }
        }
    }
    return blnvalidate;
}

函数完成后，我们现在已经识别了所有具有必需类名的 <input> 字段。所有其他 <input> 都将被脚本忽略。电子邮件和问题项现在必须得到验证。

验证

为了验证电子邮件，我们将创建一个简单的函数，使用正则表达式来检查电子邮件是否有效。当验证函数找到 class="reqemail" 时，就会调用它。

function validateEmail(elementsInputs, intCounter)
{
    var emailFilter=/^.+@.+\..{2,3}$/;
    if (!emailFilter.test(elementsInputs[intCounter].value)) { return true; }
}

validateEmail(elementsInputs, intCounter) 如果电子邮件地址无效，将返回 true。在上面的示例中，这会在 validateForm(currentForm) 函数中触发一个警报。我们将检查“您觉得这篇文章有用吗？” <input> 是否输入了任何文本。

function validateText(elementsInputs, intCounter)
{
    if (elementsInputs[intCounter].value == "") { return true; }
}

分离HTMLJavaScript，以及CSS

最后一步是将所有 JavaScript 从HTML页面中删除。我们最初在文章开头应用于 <form> 的 onsubmit 函数现在可以删除，并且我们可以将函数调用 validateForms() 应用于所有表单。打开的 <form> 标签现在应如下所示：

<form action="#">

我们现在应该在 .js 文件中的所有表单标签上应用表单 onsubmit 函数调用。

function validateForms()
{
    elementsForms = document.getElementsByTagName("form");
    for (var intCounter = 0; intCounter < elementsForms.length; intCounter++)
    { elementsForms[intCounter].onsubmit = function () { return validation(this); } }
}

最后，我们使用 js 文件底部的以下脚本注册事件（有关注册事件的更多信息，请参阅 Simon Willison 的博客）。

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function') { window.onload = func; }
    else { window.onload = function() { oldonload(); func(); } }
}
addLoadEvent(validateForms);

如果启用了 JavaScript，那么函数调用将应用于所有 form，并且任何具有 reqEmail 和 reqQuestion 的 input 将自动得到验证。

结论

此解决方案演示了使用 JavaScript 逐步增强表单的关键优势：

仅当启用了 JavaScript 时，JavaScript 才会验证表单。
没有包含 JavaScript 的HTML，可能将 Web 设计与 Web 开发分开。
任何错误、未来的增强都可以轻松地在一个文件中完成，从而大大缩短开发时间。

查看此功能齐全的示例。