本文介绍如何使用 JavaScript 检测表单内容是否被用户修改。通过遍历表单元素，对比当前值与默认值（如 checked 与 defaultChecked、value 与 defaultValue），判断表单状态。结合 window.onbeforeunload 事件，在用户尝试离开页面时弹出未保存更改的警告，提升用户体验并防止数据丢失。
表单变更检测逻辑实现
在某些场景下，开发者需要判断用户是否对表单内容进行了修改。若表单内容发生过变更，则返回 true；若未发生变更，则返回 false。具体实现代码如下：
e = e || window.event;
具体代码实现如下：
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;
}
}
浏览器关闭前的未保存提示window.onbeforeunload = function(e) {
}
};