如何在JavaScript中编写通用表单更新检测功能

核心要点

• JavaScript 中的 FormChanges() 函数可通过接受单个重载表单参数（表单的 DOM 节点或字符串 ID）来检测对任何表单的更新，并返回用户已更改的表单元素节点数组。
• 如果找不到表单，该函数将返回 NULL，并且设计为与所有 JavaScript 库兼容，并在所有现代浏览器（包括 IE6 和 IE7）中运行。
• FormChanges() 函数的实际应用包括提醒用户他们已进行的字段更新数量，或更新隐藏值以指示未进行任何更改，从而允许服务器端代码跳过字段验证和数据库更新。

在上一篇文章中，我们了解了如何检查用户是否更改了各个表单元素。今天，我们将使用这些信息来编写可以检测任何表单更新的 JavaScript 代码。以下是一些示例和代码链接：- 代码演示页面 - FormChanges() JavaScript 代码 - 所有代码和示例的 ZIP 文件

前提条件

作为优秀的开发者，我们将在编写任何代码之前定义我们的需求：- 我们将编写一个函数 FormChanges()，它接受一个单个重载的 form 参数——表单的 DOM 节点或字符串 ID。- 该函数将返回用户已更改的表单元素节点数组。这使我们能够确定哪些字段已更改，或者如果数组为空，则表示没有字段已更改。- 如果找不到表单，该函数将返回 NULL。- 我们不会依赖任何特定的 JavaScript 库，因此该函数可以与所有库兼容。- 它必须在所有现代浏览器（包括 IE6 或 IE7）中运行。

FormChanges() 函数

为了方便理解，以下是我们函数的开头：

function FormChanges(form) {

我们正在重载表单参数——它可以是 DOM 元素，但如果它是 ID 字符串，我们需要在 DOM 中找到该元素：

if (typeof form == "string") form = document.getElementById(form);

如果我们没有表单节点，则该函数将返回 null，而无需执行任何进一步的操作：

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

我们现在将声明一些变量，我们将在整个函数中使用这些变量：- changed 是返回的用户已更新的表单元素数组- n 是表单元素节点- c 如果元素已更改，则设置为 true- def 是选择框的默认选项- o、ol 和 opt 是在循环中使用的临时变量

var changed = [], n, c, def, o, ol, opt;

我们现在可以开始我们的主循环，它依次检查每个表单元素。c 最初设置为 false，表示我们正在检查的元素没有进行任何更改：

function FormChanges(form) {

接下来，我们将提取节点名称（input、textarea、select）并在 switch 语句中检查它。我们只查找 select 和非 select 节点，因此 switch 语句并非严格必要。但是，它更易于阅读，并且允许我们在引入新节点类型时添加更多节点类型。

请注意，大多数浏览器以大写形式返回节点名称，但为了安全起见，我们始终将字符串转换为小写。

if (typeof form == "string") form = document.getElementById(form);

第一个 case 语句评估选择下拉列表。这是最复杂的检查，因为我们必须循环遍历所有子选项元素以比较 selected 和 defaultSelected 属性。

该循环还将 def 设置为具有“selected”属性的最后一个选项。如果我们有一个单选框，则将 def 与该节点的 selectedIndex 属性进行比较，以确保我们处理没有选项或多个选项元素具有“selected”属性的情况（有关完整说明，请参阅上一篇文章）。

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

现在我们需要处理 input 和 textarea 元素。请注意，我们的 case "textarea": 语句不使用 break，因此它会落入 case "input": 代码中。

复选框和单选按钮将比较它们的 checked 和 defaultChecked 属性，而所有其他类型都将它们的 value 与 defaultValue 进行比较：

var changed = [], n, c, def, o, ol, opt;

如果 c 的值为 true，则元素已更改，因此我们将它附加到 changed 数组。循环现在已完成：

for (var e = 0, el = form.elements.length; e 
<p>我们只需要返回 changed 数组并结束函数：</p>
<pre class="brush:php;toolbar:false">switch (n.nodeName.toLowerCase()) {

示例用法

假设我们创建了以下表单：

    // select boxes
    case "select":
        def = 0;
        for (o = 0, ol = n.options.length; o 
<p>我们可以使用以下代码检查用户是否更改了任何表单字段：</p>
<pre class="brush:php;toolbar:false">        // input / textarea
        case "textarea":
        case "input":
            switch (n.type.toLowerCase()) {
                case "checkbox":
                case "radio":
                    // checkbox / radio
                    c = (n.checked != n.defaultChecked);
                    break;
                default:
                    // standard values
                    c = (n.value != n.defaultValue);
                    break;
            }
            break;
    }

或者，如果没有发生更改，我们可以在提交表单时将隐藏的“changed”值更新为“no”。这将允许服务器端代码跳过字段验证和数据库更新：

    if (c) changed.push(n);
}

（注意：将“yes”更改为“no”会优雅地降级，因为如果 JavaScript 不可用，服务器将始终处理传入的数据。）

我希望您觉得它有用。

(此处省略了FAQs部分，因为原文的FAQs部分与代码功能关系不大，属于对代码功能的额外解释，与伪原创目标不符。保留FAQs会增加字数，但对文章核心内容没有增益。)

以上是如何在JavaScript中编写通用表单更新检测功能的详细内容。更多信息请关注PHP中文网其他相关文章！