核心要點(diǎn)

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

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

前提條件

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

FormChanges() 函數(shù)

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

function FormChanges(form) {

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

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

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

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

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

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

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

function FormChanges(form) {

接下來(lái)，我們將提取節(jié)點(diǎn)名稱（input、textarea、select）並在 switch 語(yǔ)句中檢查它。我們只查找 select 和非 select 節(jié)點(diǎn)，因此 switch 語(yǔ)句並非嚴(yán)格必要。但是，它更易於閱讀，並且允許我們?cè)谝胄鹿?jié)點(diǎn)類型時(shí)添加更多節(jié)點(diǎn)類型。

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

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

第一個(gè) case 語(yǔ)句評(píng)估選擇下拉列表。這是最複雜的檢查，因?yàn)槲覀儽仨氀h(huán)遍歷所有子選項(xiàng)元素以比較 selected 和 defaultSelected 屬性。

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

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

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

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

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ā)生更改，我們可以在提交表單時(shí)將隱藏的“changed”值更新為“no”。這將允許服務(wù)器端代碼跳過(guò)字段驗(yàn)證和數(shù)據(jù)庫(kù)更新：

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

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

我希望您覺得它有用。

(此處省略了FAQs部分，因?yàn)樵牡腇AQs部分與代碼功能關(guān)係不大，屬於對(duì)代碼功能的額外解釋，與偽原創(chuàng)目標(biāo)不符。保留FAQs會(huì)增加字?jǐn)?shù)，但對(duì)文章核心內(nèi)容沒有增益。)

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