pattern仅作前端格式提示，不保障安全，须后端重验；正则需裸字符串、自动锚定；仅对文本型type生效；空值默认通过，必配required；移动端需js兜底，且需主动触发校验与反馈。
pattern 属性本身不提供“安全校验”，它只做格式层面的轻量前端提示——输入不符合正则就拦提交，但拦不住绕过、伪造或真实无效数据。真要安全，必须配合后端重验，且前端不能依赖 pattern 做逻辑判断。
pattern 的正则写法必须是裸字符串，不是 JS 正则字面量
浏览器把 pattern 当作纯字符串解析，内部用 new RegExp(pattern, 'u') 编译，自动加 ^ 和 $ 锚定全串。你写 [a-zA-Z0-9]{6} 就等效于 ^[a-zA-Z0-9]{6}$，加斜杠或修饰符反而失效。
- ❌ 错误：
<input pattern="/^[a-z]{4}$/">（斜杠被当作文本，正则无效） - ✅ 正确：
<input pattern="[a-z]{4}" title="请输入4个小写字母"> - 连字符
-在字符类[]里必须放开头或结尾，否则会被当成范围符，比如[a-z-_]会报错；应写成[-a-z_]或[a-z_-]
type="number"、type="date" 等非文本类型完全忽略 pattern
pattern 只对 type="text"、type="tel"、type="email"、type="password" 等文本型输入生效。写了 type="number" pattern="\d{6}"，浏览器直接跳过校验。
- 要控数字格式（如6位验证码），必须用
type="text"或type="tel"（iOS 更倾向数字键盘） - 需要语义化数值 + 格式控制？改用
type="text" inputmode="numeric"，比type="number"更可靠 -
type="email"自带基础校验，pattern是叠加限制，比如强制小写域名：pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
空值默认通过，不触发校验——必须加 required
哪怕 pattern="[0-9]{6}" 再严，用户不输内容也能提交成功。因为 pattern 默认允许空值，这是最容易漏掉的点。
- ✅ 必须搭配
required：<input pattern="\d{6}" required title="请输入6位数字"> - 移动端 Safari 对
pattern支持不稳定，尤其涉及中文或复杂字符集时，建议 JS 层兜底监听input或blur事件 - 用户粘贴内容常带空格或大小写混杂，需在
input事件里清洗：e.target.value = e.target.value.trim().toUpperCase()
pattern 不替代后端验证，也不检查真实性
它只管“长得像”，不管“是不是真的”。优惠券码格式对了，但已过期或不存在；手机号正则过了，但号段已停用或未实名——这些 pattern 都无能为力。
- 真正难的不是写正则，而是明确边界：哪些归前端（格式）、哪些归后端（存在性、状态、业务规则）
- 提交前用 JS 调
checkValidity()主动触发，再结合 API 验证有效性，比纯pattern可靠得多 -
setCustomValidity()一旦设值，就必须手动清空，否则后续合法输入也一直报错；建议在input事件里校验通过时立刻设为空字符串
最常被忽略的是：pattern 校验失败时浏览器不主动反馈，用户可能只看到空白弹窗或没反应。别指望它自己高亮或提示，得靠 title + JS reportValidity() 补足体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
