JavaScript 检测表单数据是否被修改的方法

Evan

发布时间：2026-10-14| 7人浏览过

原创

在 Web 开发中，我们经常需要判断用户是否在未保存的情况下试图离开当前页面。本文将提供一段原生 JavaScript 代码，用于精确检测 HTML 表单中的各个控件是否发生了修改。

为什么需要检测表单状态

当用户在一个复杂的表单中输入了大量数据后，如果意外刷新页面或导航到另一个 URL，浏览器可能会弹出“你确定要离开此页面吗？”的警告。为了友好地实现这一功能，我们需要一个函数来判断表单中的任何字段是否从原始值发生了改变。这种状态通常被称为 dirty（脏）状态。

核心实现逻辑

不同类型的表单控件存储“当前值”和“默认值”的属性有所不同。我们需要针对每种类型分别进行处理：

文本类输入框：包括 text, textarea, password, hidden。比较 element.value 和 element.defaultValue。
选择框类：包括 checkbox 和 radio。比较 element.checked 和 element.defaultChecked。
下拉列表：包括 select-one 和 select-multiple。需要遍历其内部的 options，比较每个选项的 selected 状态和 defaultSelected 状态。

第1步：定义 dirty 检测函数

首先，创建一个名为 formIsDirty 的函数，接收一个 form DOM 元素作为参数。该函数将遍历表单内所有元素，一旦发现任一元素的状态与初始状态不符，立即返回 true；若循环结束未发现变化，则返回 false。

function formIsDirty(form) {
    for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        var type = element.type;

        // 处理复选框和单选按钮
        if (type == "checkbox" || type == "radio") {
            if (element.checked != element.defaultChecked) {
                return true;
            }
        }
        // 处理文本、密码、隐藏域和普通文本域
        else if (type == "hidden" || type == "password" || type == "text" || type == "textarea") {
            if (element.value != element.defaultValue) {
                return true;
            }
        }
        // 处理下拉菜单（单选或多选）
        else if (type == "select-one" || type == "select-multiple") {
            for (var j = 0; j < element.options.length; j++) {
                if (element.options[j].selected != element.options[j].defaultSelected) {
                    return true;
                }
            }
        }
    }
    return false;
}

第2步：绑定页面卸载事件

检测到表单变更后，我们需要利用浏览器的 window.onbeforeunload 事件来触发警告。该事件在窗口即将卸载前执行，此时可以设置返回值来显示自定义提示语。

window.onbeforeunload = function(e) {
    e = e || window.event;
    // 假设我们要检测 id 为 'someForm' 的表单
    if (formIsDirty(document.forms["someForm"])) {
        if (e) {
            e.returnValue = "You have unsaved changes.";
        }
        return "You have unsaved changes.";
    }
};