javascript表单脏检查通过记录初始值并实时比对字段变化实现，涵盖初始化快照、事件监听（input/change/click）、beforeunload拦截及边界处理，无需框架即可轻量稳健运行。
在 JavaScript 中实现表单脏检查（Dirty Check），核心是**记录初始值，在用户修改后对比当前值是否变化**，从而提示“数据已更改，是否保存？”这类交互。不依赖框架也能轻量实现。
1. 初始化时保存原始表单值
页面加载或表单渲染完成后，遍历所有可编辑字段（input、textarea、select），读取其 value 或 checked/selectedOptions 状态，并存为快照对象：
- 推荐用
name属性作为键（需确保每个字段有唯一name） - 对复选框（
type="checkbox"）、单选组，单独处理布尔值或数组 - 忽略禁用（
disabled）或只读（readonly）字段
示例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const form = document.querySelector('#myForm');
const originalValues = {};
Array.from(form.elements).forEach(el => {
if (el.name && !el.disabled && !el.readOnly) {
if (el.type === 'checkbox' || el.type === 'radio') {
originalValues[el.name] = el.checked;
} else if (el.tagName === 'SELECT' && el.multiple) {
originalValues[el.name] = Array.from(el.selectedOptions).map(opt => opt.value);
} else {
originalValues[el.name] = el.value;
}
}
});
2. 监听输入变化并标记“已修改”
给表单绑定 input、change、click（针对 checkbox/radio）事件，实时比对当前值与原始值：
-
input覆盖文本类输入的即时变化（如 typing） -
change处理 select、日期控件等失焦才确认的变更 -
click确保 checkbox/radio 点击后立即响应 - 只要任一字段变化，就设
isDirty = true，并可触发 UI 提示（如显示星号、启用保存按钮）
示例：
let isDirty = false;
const checkDirty = () => {
let dirty = false;
Array.from(form.elements).forEach(el => {
if (!el.name || el.disabled || el.readOnly) return;
let currentValue;
if (el.type === 'checkbox' || el.type === 'radio') {
currentValue = el.checked;
} else if (el.tagName === 'SELECT' && el.multiple) {
currentValue = Array.from(el.selectedOptions).map(opt => opt.value);
} else {
currentValue = el.value;
}
const original = originalValues[el.name];
// 深比较数组，其他用 == 即可（字符串/数字/布尔）
if (Array.isArray(original)) {
dirty = dirty || JSON.stringify(original) !== JSON.stringify(currentValue);
} else {
dirty = dirty || original !== currentValue;
}
});
isDirty = dirty;
updateUI(); // 如 document.title += '*'，或显示提示条
};
form.addEventListener('input', checkDirty);
form.addEventListener('change', checkDirty);
form.addEventListener('click', e => {
if (e.target.type === 'checkbox' || e.target.type === 'radio') {
checkDirty();
}
});
3. 离开页面前拦截未保存修改
使用 beforeunload 事件，在用户关闭标签页、刷新或跳转前弹出浏览器原生提示（注意：现代浏览器仅显示统一文案，无法自定义）：
- 仅当
isDirty === true时设置event.returnValue - 提交成功后记得重置
isDirty = false并更新originalValues - 手动调用
form.reset()后也应同步重置脏状态
示例：
window.addEventListener('beforeunload', (e) => {
if (isDirty) {
e.preventDefault();
e.returnValue = ''; // 触发浏览器确认对话框
}
});
// 提交成功后
form.addEventListener('submit', (e) => {
// ... 发送请求
fetch('/save', { method: 'POST', body: new FormData(form) })
.then(() => {
isDirty = false;
// 更新原始值为当前值，视为新基准
Array.from(form.elements).forEach(el => {
if (el.name && !el.disabled && !el.readOnly) {
// 同初始化逻辑，重新赋 originalValues[el.name]
}
});
updateUI();
});
});
4. 注意边界情况
实际项目中容易忽略但影响体验的点：
-
动态增删字段：新增字段需手动调用初始化逻辑，删除字段要从
originalValues清理对应项 -
富文本编辑器：如
contenteditable区域，需监听input或用 MutationObserver -
时间/日期输入：不同浏览器返回格式可能不同（如
"2024-05-20"vs"2024-05-20T00:00"），建议统一 parse 后比较 -
空格与大小写：业务上是否认为
"abc "和"abc"不同？按需决定是否 trim 或忽略大小写
不复杂但容易忽略细节。核心就是“记初值 → 监变化 → 比差异 → 做响应”，无需第三方库也能稳健运行。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
