required 属性仅在原生表单提交时生效，若用 javascript 提交需手动调用 checkvalidity()；type=”email”/”url” 验证宽松，后端必须校验；setcustomvalidity() 需配合 input 事件清空状态，pattern 自动锚定且不支持正则标志。
required 属性不生效？检查表单提交触发方式
html5 的 required 只在表单通过原生提交（比如点击 <input type="submit"> 或回车）时才触发验证，如果用了 Event.preventDefault() 或纯 JavaScript 提交（如 fetch()），它就完全不弹提示、也不阻断流程。
- 确保表单有
<form></form>包裹，且提交按钮是type="submit"，不是"button" - 避免在
submit事件里直接preventDefault()后不做校验——先调用form.checkValidity()判断，再决定是否继续 - 移动端软键盘回车键默认触发表单提交，但某些 webview（如旧版微信内置浏览器）可能忽略
required，需额外用 js 补充判断
type=”email” 或 type=”url” 验证太宽松？别依赖它做数据清洗
type="email" 只检查是否含 @ 和域名格式（如 a@b.c 就算合法），type="url" 甚至接受 http://x 这种明显无效地址。它们不是正则替代品，仅提供基础格式引导和软性提示。
- 后端必须重新校验，前端不能把
type="email"当作“已确认邮箱有效” - 想加强提示，可监听
input事件 +setCustomValidity()，比如检测邮箱域名是否常见（gmail.com、qq.com）并给出友好提醒 - 注意 safari 对
type="date"的本地化支持不稳定，输入框可能显示为文本，且无法用 CSS 伪元素修改占位符样式
自定义错误提示文案：setCustomValidity() 的正确用法
直接给 input.setCustomValidity("不能为空") 会永久标记为无效，哪怕用户后续输入了内容，也仍报错——必须在每次输入后清空校验状态。
- 推荐写法：
input.addEventListener('input', () => input.setCustomValidity(''))，再在blur或submit时按需设错 - 设空字符串
''表示“通过”，设任意非空字符串表示“失败”，设NULL不起作用 - 配合
:invalid和:user-invalidCSS 伪类可以区分“未交互过”和“已输错”的状态，但 IE 完全不支持后者
pattern 属性的正则陷阱：没有 ^ 和 $ 也会被自动锚定
pattern 内部会被浏览器自动加上行首 ^ 和行尾 $，所以写 pattern="d{3}" 实际等价于 ^d{3}$，而不是“包含三个数字”。另外，它只对字符串整体生效，不支持标志位（如 i 忽略大小写）。
立即学习“前端免费学习笔记（深入）”；
- 要匹配“以 abc 开头”，写
pattern="abc.*"即可，不用加^ - 中文字符需注意 Unicode 范围，
[u4e00-u9fa5]{2,10}在部分安卓浏览器中可能不生效，建议降级为 JS 校验 -
pattern错误提示文案无法单独定制，统一走浏览器默认，想控制就得用setCustomValidity()
真正麻烦的不是属性怎么写，而是不同浏览器对同一属性的解析粒度差异——比如 chrome 会实时检查 min/max，而 firefox 直到失去焦点才触发。上线前至少要在 Chrome、Safari、edge 和主流安卓 WebView 里各点一次提交试试。