自动填充后required验证未触发是HTML5表单设计特性，因填充不触发input/change事件且不标记为已填写；需确保表单结构合规、提交方式正确，并在submit时调用checkValidity()补全校验。
自动填充（Autofill）后 required 验证未触发，本质是浏览器没把填充动作识别为“用户交互完成”，导致表单提交时跳过了校验环节。这不是 bug，而是 HTML5 表单验证机制的设计特性：它只在原生 submit 事件中统一检查 value，而自动填充本身不触发 input、change 或 blur 等事件，也不自动标记字段为“已填写”。
确保表单结构和提交方式合规
required 属性必须依赖完整的表单语义上下文才能生效：
- 所有带 required 的 input 必须包裹在 <form> 标签内，不能散落在 div 或其他容器中
- 提交按钮必须是 type="submit"，不能用 type="button" + onclick 调用 submit() 或跳转逻辑
- 不要用 JavaScript 直接调用 form.submit() —— 它绕过验证；应触发原生点击或回车提交
监听 autofill 后的时机补全校验
Chrome、Edge 等现代浏览器在 autofill 完成后会触发 input 和 change 事件（但存在延迟或不一致），可借此手动激活校验：
- 对关键字段（如 email、password）监听 input 事件，在回调中调用 element.reportValidity()
- 更稳妥的做法：在 form.addEventListener("submit", ...) 中，开头加一句 if (!form.checkValidity()) return e.preventDefault();
- 避免写
oninput="this.reportValidity()"—— 它会在每次输入时频繁弹提示，体验差
处理隐藏/动态字段干扰验证
自动填充常出现在登录页，而这类页面可能含条件显示字段（如“记住我”展开的额外输入框）。若这些字段被动态设为 required 但实际不可见，就会导致提交失败且无提示：
- 检查是否存在 display: none 或 visibility: hidden 的 required 字段 —— 浏览器仍会校验它们
- 动态控制 required 属性时，务必同步 UI 状态：显示时设 required=true，隐藏时设 required=false
- select 或 radio 组合中，若用 disabled 的 placeholder option（如 <option value="" disabled selected>请选择</option>），需确保其 value 为空字符串，否则 required 不生效
验证值是否真为空（空格陷阱）
required 只判断 value.trim() === ""，自动填充有时带首尾空格或不可见字符：
- 可在 submit 处理器中预先清理：input.value = input.value.trim()
- 对 password 类字段，注意 autofill 工具可能填入空格或换行符，建议加 pattern=".+" 或 minlength="1" 辅助约束
- textarea 的 required 同样只读 value，不看 innerText 或 placeholder，填充后若内容被 JS 清空，就立刻变无效
