在表单提交前检查字段初始值，核心做法是监听 submit 事件，并在回调中通过 event.preventdefault() 拦截默认提交行为。随后遍历表单元素，将当前值与初始化时保存的副本进行比对，若发现差异则执行相应的逻辑（如弹出提示或阻止提交）。
如何正确保存和获取表单的初始状态
要实现这一功能，必须在页面加载完成且表单渲染完毕后立即读取一次所有字段的值，并将其存储在全局变量或闭包作用域中。对于 <input> 元素，主要关注 value 属性；对于 <select></select> 下拉框，同样使用 value；而对于复选框 <checkbox></checkbox> 和单选框 <radio></radio>，则需要检查 checked 布尔属性。只有准确捕获了这些初始状态，后续的对比才有意义。
const form = document.getElementById('myForm');
const initialData = {};
// 页面加载后保存初始值
window.addEventListener('DOMContentLoaded', () => {
const inputs = form.elements;
for (let i = 0; i < inputs.length; i++) {
const el = inputs[i];
if (el.type === 'checkbox' || el.type === 'radio') {
initialData[el.name] = el.checked;
} else {
initialData[el.name] = el.value;
}
}
});
// 提交时对比
form.addEventListener('submit', (e) => {
e.preventDefault(); // 先阻止默认提交
let hasChanged = false;
for (const [key, initialValue] of Object.entries(initialData)) {
const currentEl = form.elements[key];
let currentValue;
if (currentEl.type === 'checkbox' || currentEl.type === 'radio') {
currentValue = currentEl.checked;
} else {
currentValue = currentEl.value;
}
if (initialValue !== currentValue) {
hasChanged = true;
console.log(`Field ${key} changed from ${initialValue} to ${currentValue}`);
}
}
if (!hasChanged) {
alert('No changes detected.');
} else {
// 这里可以决定是否真正提交，例如：
// form.submit();
}
});如何处理动态添加的表单元素
如果表单结构不是静态的，而是通过 JavaScript 动态插入新的输入框，上述基于 DOMContentLoaded 的一次性快照就会失效。此时需要采用更灵活的策略，比如在每次动态添加元素后更新初始数据集合，或者在提交时重新生成初始值快照并与当前值对比。另一种常见场景是用户修改了数据但未提交，此时“初始值”的概念可能需要重置为上一次成功提交后的状态。因此，检查逻辑应封装在一个独立的函数中，以便在需要时随时调用，而不是仅仅绑定在固定的生命周期钩子里。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
// 假设有一个动态添加字段的函数
function addDynamicField(name, value) {
const input = document.createElement('input');
input.type = 'text';
input.name = name;
input.value = value;
form.appendChild(input);
// 关键步骤：更新初始数据记录
initialData[name] = value;
}
// 在提交事件中，依然复用之前的对比逻辑
// 但确保 initialData 包含了所有动态字段当检测到值变化时应该采取什么具体行动
一旦确认字段值发生了改变，开发者需要根据业务需求决定后续动作。最常见的做法是阻止表单自动提交，转而显示一个模态框询问用户是否确认覆盖原始数据，或者仅高亮显示被修改的字段以提供视觉反馈。如果业务允许静默提交，则可以在日志中记录变更详情。需要注意的是，某些表单控件（如文件上传 <input type="file">）的值无法通过 value 属性直接读取进行比较，因为出于安全原因浏览器会清空该值或返回固定字符串，这类字段通常不参与初始值比对，或者需要借助 FileList 的其他属性进行特殊处理。
