required仅校验非空，pattern才校验格式；pattern需配合text类type，值为无前后斜杠的正则，浏览器自动添加^$，反斜杠需双写，Unicode需用汉字范围或JS处理，空值校验用|^$分支，提示靠title属性。
required 属性只管“填没填”，不管“填得对不对”
很多开发者以为加了 required 就算做了校验，其实它只触发“非空检查”：用户没输任何内容时浏览器才报错，一旦输入一个空格、一个字母、甚至乱码，required 就直接放行。真正决定“格式对不对”的是 pattern，而且它必须配合 type="text"（或省略 type）、type="email" 等可输入文本的类型才能生效。
-
pattern的值必须是正则表达式字符串，**不写前后斜杠/**（HTML 中不是 JS，别写成/^\d{6}$/） - 浏览器默认用
^和$包裹你的 pattern，所以pattern="123"实际匹配的是整个字符串等于"123"，不是“包含 123” - 如果想允许开头/结尾有空白，得显式写进正则里，比如
pattern="^\s*\d{6}\s*$"
pattern 正则写错会导致“永远校验失败”或“形同虚设”
常见翻车点是忘了转义或误用修饰符。HTML5 的 pattern 不支持 flags（如 i、m），也不支持 \uXXXX Unicode 写法；所有反斜杠都要双写（因为 HTML 属性值先经 HTML 解析，再传给正则引擎）。
上面这行会出错——\u4e00 在 HTML 属性里会被当成无效字符实体。正确写法是用 一 或干脆改用 JS 控制，或者退一步用 [一-龥]（注意：该范围不覆盖全部汉字，但兼容性好）：
把 required 和 pattern 拆开用，能做“条件校验”
比如“手机号可填可不填，但如果填了就必须是 11 位数字”。这时候不能只靠 pattern，因为没填时它不触发；也不能只靠 required，因为它强制必填。解法是：去掉 required，用 pattern 配合“空字符串或合法格式”的正则：
立即学习“前端免费学习笔记（深入）”；
- 允许空：在 pattern 里用
|分支，比如pattern="^$|^\d{11}$" - 更严谨点：避免用户只输空格，写成
pattern="^\s*$|^\d{11}$"，再配合title提示“留空或输入 11 位手机号” - 注意：这种写法在 Safari 旧版本可能不识别
^$分支，稳妥起见可监听input事件 + JS 补充判断
pattern 校验失败时的提示语靠 title 属性控制
浏览器原生弹出的错误消息（如 Chrome 显示“请与所要求的格式匹配”）无法直接修改，但你可以用 title 属性提供自定义提示，它会在 hover 或校验失败时显示：
这个 title 不是装饰用的，它是唯一能影响原生验证提示文案的属性。不过要注意：title 值过长在移动端可能截断，且无法换行；真要精细控制提示，还是得用 setCustomValidity() + JS。
pattern 的正则能力有限，复杂逻辑（比如“密码需含大小写字母和数字”“两次输入密码比对”）没法单靠它完成；别硬塞，该上 JS 的时候就上 JS。
