动态添加的<input>的required不生效，因浏览器仅在初始解析时处理该属性；需手动设置required、调用setCustomValidity('')并确保元素已挂载DOM，再通过JS主动管理校验状态。
动态添加的 <input> 为什么 required 不生效？
因为浏览器只在初始 HTML 解析时处理 required 属性，后续用 JS 动态插入的元素，即使带 required，也不会被表单校验逻辑自动识别——尤其是调用 form.checkValidity() 或触发表单 submit 事件时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动为每个新创建的
<input>设置required属性，并调用input.setCustomValidity('')清除可能残留的自定义错误状态 - 确保新元素已挂载到 DOM 中（比如用
appendChild()或insertAdjacentElement()），否则校验逻辑会跳过它 - 不要依赖 HTML 属性“自动生效”，必须配合 JS 主动管理校验状态
addInput() 函数里怎么同步校验逻辑？
每次新增输入框后，不仅要渲染 DOM，还要把它纳入整个表单的校验生命周期。常见做法是监听其 input 和 blur 事件，实时更新有效性，并在提交前统一检查。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个新
<input>绑定input事件，调用input.checkValidity()并根据结果切换 CSS 类（如invalid） - 在表单
submit事件处理器中，遍历所有动态生成的input，逐个调用checkValidity()；任一返回false就event.preventDefault() - 避免重复绑定：用事件委托（监听父容器）或每次创建时单独绑定，但需确保解绑逻辑清晰（尤其涉及销毁输入框时）
多个同名动态字段怎么用 FormData 提交并校验？
当用 name="phone[]" 或 name="item-1" 这类方式生成多个字段时，FormData 能正确收集值，但原生校验不支持数组式 name —— 浏览器只认单个 name 对应一个可校验控件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃用
name="xxx[]"配合required，改用唯一name（如name="phone-0"、name="phone-1"），再通过 JS 批量校验 - 提交前用
form.querySelectorAll('input[name^="phone-"]')获取全部电话输入框，逐个检查非空和格式（如/^1[3-9]\d{9}$/.test(input.value)） - 若后端要求数组结构，可在 JS 中手动构造对象：
const phones = Array.from(inputs).map(i => i.value).filter(v => v)，再 append 到FormData
IE11 或旧版 Safari 下动态校验失效怎么办？
checkValidity() 和 setCustomValidity() 在 IE11 中对动态插入的元素支持不稳定；部分老浏览器甚至不触发 invalid 事件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 降级策略：不依赖
invalid事件，改用定时轮询或 submit 时集中校验 - 兼容写法：对每个新
input显式调用input.reportValidity()（IE11 不支持，需 feature detect 后 fallback 到手动提示） - 关键点：老浏览器中，
form.checkValidity()可能忽略动态元素，必须手动遍历form.elements并逐个调用checkValidity()
input.checkValidity() 触发状态更新，或者 submit 时忘了遍历所有动态节点。只要校验逻辑不绕过 DOM 元素本身，就基本不会漏。 
