required 属性未拦住空提交是因为 JS 中调用了 e.preventDefault() 或直接执行 form.submit()，跳过了浏览器默认校验流程；修复方式包括移除 e.preventDefault()、改用 form.checkValidity() + fetch 或添加 form.reportValidity() 主动提示。
required 属性为什么没拦住空提交
因为你在 JS 里调了 e.preventDefault() 或直接执行 form.submit()，原生校验就被跳过了。required 只在浏览器默认提交流程中触发——比如用户点 <button type="submit"></button> 或回车。
修复方式很简单：别禁用默认行为，或者手动补上校验逻辑：
- 保留
submit事件监听，但去掉e.preventDefault() - 想用 fetch 提交？先调
form.checkValidity()判断，通过再发请求 - 必须阻止默认？那就加一句
form.reportValidity()主动唤出错误提示 - 注意：被设为
disabled或hidden的字段，即使带required也不参与校验
pattern 正则验证总不生效的几个现实原因
pattern 看似简单，但实际踩坑集中在三处：匹配范围、提示文案、移动端兼容性。
它只校验整个输入值是否**完全匹配**正则，不是“包含”或“开头匹配”。比如 pattern="[0-9]+" 会拒绝 "12a"，但也会拒绝 " 12 "（前后空格）。
立即学习“前端免费学习笔记（深入）”；
- 务必配合
title属性，否则 Safari 和部分安卓浏览器不显示提示文字 - 移动端 Chrome 对
pattern支持较好，但 iOS Safari 在某些复杂正则下会静默失败（比如嵌套量词），建议用简单结构 -
type="text"下 pattern 生效，但type="number"会忽略 pattern——数值类校验请改用min/max/step - 如果要校验邮箱格式，优先用
type="email"，比写正则更可靠且自动适配键盘
大表单提交慢或失败，不是前端卡顿而是 payload 被截断
当表单含大量 <textarea></textarea>、隐藏 JSON 字段或 base64 图片时，原生 submit 很容易触发 Nginx 的 client_max_body_size 限制，或浏览器对 URL 长度的硬性约束（尤其 GET 提交）。
- 禁用
<form method="GET"></form>处理任何非查询类提交，GET 没 body，全靠 query string，极易 414 - 改用
fetch+FormData，它自动走multipart/form-data编码，天然支持大字段和二进制 - 若后端接受 JSON，用
JSON.stringify()打包，但记得把Date、undefined、function这类无法序列化的值提前处理掉 - 敏感字段（如日志快照、localStorage 片段）必须脱敏后再塞进 payload，前端不清理，后端拦不住
dialog 元素比 JS 弹窗快 20 倍，但 Safari 有个隐藏开关
<dialog></dialog> 渲染开销极低，实测打开速度约 5ms，内存占用不到 20KB，远低于 Bootstrap Modal 等方案。但它在 Safari 中默认不启用，需要显式调用 showModal() 或 show()，且必须确保元素已挂载到 DOM。
- 别在
document.createElement('dialog')后立刻调.showModal()，得先document.body.appendChild(dialog) - Safari 对
novalidate在<form method="dialog"></form>内的行为有差异，测试时重点看“点确认后 dialog 是否真关闭” -
<dialog></dialog>自带焦点管理与 backdrop 灰层，不需要手动锁body滚动或遍历关闭其他弹窗 - 如果要支持 IE 或老版 Edge，必须加 polyfill，但注意 polyfill 会吃掉原生的可访问性优势
原生功能不是银弹，关键在理解它在哪条路径上生效、在哪种边界下失效。比如 required 是个开关，不是魔法；dialog 是个元素，不是框架——用错上下文，再“现代”的标签也救不了表单体验。
