在表单提交前检查字段历史操作状态，核心做法是监听 submit 事件并调用 event.preventdefault() 拦截默认提交，随后遍历表单元素检查其 value 是否发生过变化。通过对比当前值与初始值（或记录的历史快照），可以判断用户是否修改过该字段，从而决定是允许提交、提示确认还是阻断提交。
如何初始化并记录字段的初始状态
要实现状态检查，第一步是在页面加载时捕获所有输入控件的初始值。这通常通过遍历 HTMLFormElement 的子节点完成，将每个 、 和 的当前 value 存入一个对象中作为基准。这样做的目的是建立一个“未修改”的参考系，后续只需比较当前值与该基准即可。
const form = document.getElementById('myForm');
const initialStates = {};
// 初始化：记录所有字段的初始值
function captureInitialState() {
const inputs = form.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
// 对于 checkbox/radio，可能需要检查 checked 属性，这里以 value 为例
initialStates[input.name] = input.value;
});
}
captureInitialState();
上述代码在页面加载后执行，initialStates 对象现在保存了每个字段在用户交互前的原始数据。如果字段没有 name 属性，可以使用 id 或索引作为键。这一步确保了即使表单是通过 AJAX 动态填充的，也能正确获取到服务端返回的初始值。
如何在提交时比对并处理差异
在用户尝试提交表单时，我们需要实时计算哪些字段发生了变化。通过再次遍历表单元素，将当前 value 与 initialStates 中的记录进行比对。如果发现任何字段存在差异，可以根据业务逻辑选择弹出确认对话框或直接阻止提交。这种方法比依赖 onchange 事件更可靠，因为 onchange 可能在某些浏览器或特定交互模式下丢失焦点事件，而提交时的快照比对是确定性的。
form.addEventListener('submit', function(event) {
let hasChanges = false;
const currentStates = {};
// 获取当前状态
const inputs = form.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
currentStates[input.name] = input.value;
// 简单字符串比对，实际项目中可能需要深度比较或忽略空白
if (currentStates[input.name] !== initialStates[input.name]) {
hasChanges = true;
}
});
if (hasChanges) {
const confirmSubmit = confirm('您有未保存的更改，确定要提交吗？');
if (!confirmSubmit) {
event.preventDefault(); // 取消提交
}
}
});
这段代码展示了完整的拦截逻辑。当 hasChanges 为 true 时，浏览器会弹出原生确认框。如果用户点击“取消”，event.preventDefault() 确保表单不会发送请求。这种机制有效防止了意外覆盖后端数据，特别适用于编辑场景。需要注意的是，如果表单包含文件上传字段，value 属性通常是只读的且为空字符串，因此需要特殊处理或排除这些字段。
如何处理动态添加的字段历史状态
在实际应用中，表单可能通过 JavaScript 动态添加新的输入字段。此时，简单的静态初始化无法覆盖新字段。必须在每次添加新字段后，立即将其纳入 initialStates 的管理范围。这可以通过封装一个更新函数来实现，确保新增字段的初始值被正确记录，从而在后续的提交检查中被正确识别为“已修改”或“未修改”。如果不这样做，新添加的字段在首次提交时会被误判为无变化，或者因不在 initialStates 中而导致比对逻辑出错。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
