核心要点
FormChanges() 函数可通过接受单个重载表单参数（表单的 DOM 节点或字符串 ID）来检测对任何表单的更新，并返回用户已更改的表单元素节点数组。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 < el; e++) {
n = form.elements[e];
c = false;我们只需要返回 changed 数组并结束函数：
switch (n.nodeName.toLowerCase()) {假设我们创建了以下表单：
// select boxes
case "select":
def = 0;
for (o = 0, ol = n.options.length; o < ol; o++) {
opt = n.options[o];
if (opt.selected) def = o;
}
c = (n.selectedIndex != def);
break;我们可以使用以下代码检查用户是否更改了任何表单字段：
// 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中文网其他相关文章！
