核心要點

• JavaScript 中的 FormChanges() 函數(shù)可通過接受單個重載表單參數(shù)（表單的 DOM 節(jié)點或字符串 ID）來檢測對任何表單的更新，並返回用戶已更改的表單元素節(jié)點數(shù)組。
• 如果找不到表單，該函數(shù)將返回 NULL，並且設(shè)計為與所有 JavaScript 庫兼容，並在所有現(xiàn)代瀏覽器（包括 IE6 和 IE7）中運行。
• FormChanges() 函數(shù)的實際應(yīng)用包括提醒用戶他們已進行的字段更新數(shù)量，或更新隱藏值以指示未進行任何更改，從而允許服務(wù)器端代碼跳過字段驗證和數(shù)據(jù)庫更新。

在上一篇文章中，我們了解瞭如何檢查用戶是否更改了各個表單元素。今天，我們將使用這些信息來編寫可以檢測任何表單更新的 JavaScript 代碼。以下是一些示例和代碼鏈接：- 代碼演示頁面 - FormChanges() JavaScript 代碼 - 所有代碼和示例的 ZIP 文件

前提條件

作為優(yōu)秀的開發(fā)者，我們將在編寫任何代碼之前定義我們的需求：- 我們將編寫一個函數(shù) FormChanges()，它接受一個單個重載的 form 參數(shù)——表單的 DOM 節(jié)點或字符串 ID。 - 該函數(shù)將返回用戶已更改的表單元素節(jié)點數(shù)組。這使我們能夠確定哪些字段已更改，或者如果數(shù)組為空，則表示沒有字段已更改。 - 如果找不到表單，該函數(shù)將返回 NULL。 - 我們不會依賴任何特定的 JavaScript 庫，因此該函數(shù)可以與所有庫兼容。 - 它必須在所有現(xiàn)代瀏覽器（包括 IE6 或 IE7）中運行。

FormChanges() 函數(shù)

為了方便理解，以下是我們函數(shù)的開頭：

function FormChanges(form) {

我們正在重載表單參數(shù)——它可以是 DOM 元素，但如果它是 ID 字符串，我們需要在 DOM 中找到該元素：

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

如果我們沒有表單節(jié)點，則該函數(shù)將返回 null，而無需執(zhí)行任何進一步的操作：

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

我們現(xiàn)在將聲明一些變量，我們將在整個函數(shù)中使用這些變量：- changed 是返回的用戶已更新的表單元素數(shù)組- n 是表單元素節(jié)點- c 如果元素已更改，則設(shè)置為 true- def 是選擇框的默認選項- o、ol 和 opt 是在循環(huán)中使用的臨時變量

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

我們現(xiàn)在可以開始我們的主循環(huán)，它依次檢查每個表單元素。 c 最初設(shè)置為 false，表示我們正在檢查的元素沒有進行任何更改：

function FormChanges(form) {

接下來，我們將提取節(jié)點名稱（input、textarea、select）並在 switch 語句中檢查它。我們只查找 select 和非 select 節(jié)點，因此 switch 語句並非嚴格必要。但是，它更易於閱讀，並且允許我們在引入新節(jié)點類型時添加更多節(jié)點類型。

請注意，大多數(shù)瀏覽器以大寫形式返回節(jié)點名稱，但為了安全起見，我們始終將字符串轉(zhuǎn)換為小寫。

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

第一個 case 語句評估選擇下拉列表。這是最複雜的檢查，因為我們必須循環(huán)遍歷所有子選項元素以比較 selected 和 defaultSelected 屬性。

該循環(huán)還將 def 設(shè)置為具有“selected”屬性的最後一個選項。如果我們有一個單選框，則將 def 與該節(jié)點的 selectedIndex 屬性進行比較，以確保我們處理沒有選項或多個選項元素具有“selected”屬性的情況（有關(guān)完整說明，請參閱上一篇文章）。

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

現(xiàn)在我們需要處理 input 和 textarea 元素。請注意，我們的 case "textarea": 語句不使用 break，因此它會落入 case "input": 代碼中。

複選框和單選按鈕將比較它們的 checked 和 defaultChecked 屬性，而所有其他類型都將它們的 value 與 defaultValue 進行比較：

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

如果 c 的值為 true，則元素已更改，因此我們將它附加到 changed 數(shù)組。循環(huán)現(xiàn)在已完成：

for (var e = 0, el = form.elements.length; e < el; e++) {
    n = form.elements[e];
    c = false;

我們只需要返回 changed 數(shù)組並結(jié)束函數(shù)：

switch (n.nodeName.toLowerCase()) {

示例用法

假設(shè)我們創(chuàng)建了以下表單：

    // 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;
    }

或者，如果沒有發(fā)生更改，我們可以在提交表單時將隱藏的“changed”值更新為“no”。這將允許服務(wù)器端代碼跳過字段驗證和數(shù)據(jù)庫更新：

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

（注意：將“yes”更改為“no”會優(yōu)雅地降級，因為如果 JavaScript 不可用，服務(wù)器將始終處理傳入的數(shù)據(jù)。）

我希望您覺得它有用。

(此處省略了FAQs部分，因為原文的FAQs部分與代碼功能關(guān)係不大，屬於對代碼功能的額外解釋，與偽原創(chuàng)目標不符。保留FAQs會增加字數(shù)，但對文章核心內(nèi)容沒有增益。)

以上是如何在JavaScript中編寫通用表單更新檢測功能的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！