必须监听form元素的submit事件并在回调首行同步调用e.preventDefault()，否则回车、submit按钮或JS调用form.submit()均会绕过验证直接提交；异步校验不可用于submit回调，仅支持同步客户端规则。
表单提交前校验失败却没阻止默认行为？
常见现象是 submit 事件里写了 event.preventDefault()，但页面仍跳转或刷新——大概率是监听对象错了。必须确保监听的是 <form> 元素本身，而不是按钮或父容器；且不能在异步操作（比如调用 fetch）后才执行 preventDefault()，否则事件早已完成。
实操建议：
- 用
form.addEventListener('submit', handler)，别用button.addEventListener('click')模拟提交 - 校验逻辑必须同步执行；若需异步（如远程去重），得先
event.preventDefault()，再手动控制提交流程 - 注意表单内有
type="submit"的按钮才触发submit事件；type="button"不会触发
动态增删字段后，新字段不响应事件？
直接用 innerHTML += ... 或 appendChild() 插入新输入框，但没给它们绑定事件，导致点击、输入、失焦都无反应。本质是事件监听器只对初始 DOM 生效，不自动“继承”到后续插入的节点。
实操建议：
- 用事件委托：监听
form上的input、change或click，再用event.target.matches('input[data-dynamic]')判断是否匹配目标字段 - 或在每次插入后显式调用初始化函数，例如：
initField(newInput)，里面绑定input和blur事件 - 避免用
document.write()或替换整个form.innerHTML，这会销毁已有事件监听器和输入状态
用 insertAdjacentHTML 添加字段时 name 属性重复？
批量添加同类字段（如多个 phone 输入框）时，若都设 name="phone"，后端收到的只会是最后一个值——浏览器按 name 合并同名字段，不是数组。
实操建议：
- 改用数组式命名：
name="phone[]"（PHP 可直接接收为数组）或name="phone[0]"、name="phone[1]"（需维护索引） - 更稳妥的做法是用唯一 ID +
name分离：例如name="contact[0].phone"，配合 JSON 提交或后端解析约定 - 插入前检查当前最大索引，可用
document.querySelectorAll('[name^="phone["]').length快速估算，但推荐维护一个计数器变量
IE11 下 FormData 无法读取动态添加的文件输入？
在 IE11 中，用 new FormData(form) 构造时，如果文件 <input type="file"> 是 JS 动态插入的，其 files 属性可能为空——不是 bug，是 IE 对动态 input 的 file API 支持不完整。
实操建议：
- 避免依赖
FormData自动收集；改用手动遍历form.elements，对每个input[type=file]单独append文件项 - 插入文件输入后，立即绑定
change事件并缓存event.target.files，后续提交时从缓存取 - 若必须兼容 IE11，放弃
multiple属性，每次只允许选一个文件，减少边界情况
