在表单提交前检查字段修改状态，最直接的方法是在 submit 事件中遍历所有表单项，通过比较其 value 属性与 defaultvalue 属性来判断是否发生过修改。如果存在任一字段被修改，则可以通过调用 event.preventdefault() 来阻止表单提交，并执行相应的逻辑（如提示用户或保存草稿）。
如何判断单个输入框是否被修改过
要判断单个输入框是否被修改，需要对比当前值 value 和初始默认值 defaultValue。这两个属性的区别在于：defaultValue 是 HTML 标签中设置的初始值，且在 JavaScript 中不可变（除非手动重置 DOM）；而 value 会随着用户输入实时变化。因此，只要 input.value !== input.defaultValue，即可认定该字段已被修改。
<form id="myForm">
<label>Name: <input type="text" name="name" value="Alice"></label>
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('myForm');
const nameInput = form.querySelector('input[name="name"]');
// 模拟用户修改
nameInput.value = 'Bob';
// 检查状态
console.log(nameInput.value); // "Bob"
console.log(nameInput.defaultValue); // "Alice"
console.log(nameInput.value !== nameInput.defaultValue); // true
</script>如何在整个表单提交时批量检查
在表单层面，可以监听 submit 事件，利用 HTMLFormElement.elements 获取所有受控元素。遍历这些元素并应用上述比较逻辑，若发现任何修改，则中断提交流程。这种方法适用于需要校验“是否有未保存更改”的场景，例如防止误触关闭或跳转。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
<form id="dataForm">
<input type="text" name="field1" value="init1">
<input type="text" name="field2" value="init2">
<button type="submit">Save</button>
</form>
<script>
const form = document.getElementById('dataForm');
form.addEventListener('submit', function(event) {
let hasChanges = false;
// 遍历所有表单元素
for (const element of form.elements) {
if (element.type === 'text' || element.type === 'textarea') {
if (element.value !== element.defaultValue) {
hasChanges = true;
break; // 找到第一个修改即停止
}
}
}
if (hasChanges) {
event.preventDefault(); // 阻止默认提交
alert('Form has unsaved changes!');
} else {
console.log('No changes, submitting...');
}
});
</script>当表单包含动态添加的字段时如何处理
如果表单中的字段是通过 JavaScript 动态插入的，这些新字段的 defaultValue 将基于它们被插入时的 value。这意味着，只有用户在动态字段插入后再次修改它，才会被视为“已修改”。这种机制天然支持动态表单的状态追踪，无需额外维护状态树。只需确保在动态创建元素时，其初始 value 正确设置，defaultValue 就会自动同步为该初始值。
