如何在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 < 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中文網其他相關文章！