pattern属性仅在提交时全值匹配校验，不支持实时反馈或自定义逻辑，适用于text等六种输入类型，需配合title提示规则，且服务端必须重复验证。
pattern 属性不是万能的表单验证方案，它只在提交时触发全值匹配校验，且不支持实时反馈或自定义错误逻辑。 浏览器原生行为决定了它适合轻量、格式明确的输入约束，比如国家代码、邮编、简单密码规则，但不适合替代 JavaScript 验证做业务逻辑判断。
pattern 的匹配机制是“整串强制匹配”
浏览器内部会自动把你的 pattern 值当作一个完整字符串来比对，等效于用 ^ 和 $ 包裹。你写 pattern="[0-9]{6}"，就表示“必须且只能是 6 位纯数字”，中间不能有空格、开头不能有 +86、结尾不能带 X。
- 显式加
^或$没问题，但没必要；加了也不会报错，只是冗余 - 写
pattern="abc"表示“整个输入必须等于 abc”，不是“包含 abc” - 不支持
/g、/i等正则标志，大小写敏感性由表达式本身控制（如用[a-zA-Z]） - 空字符串默认通过所有 pattern（除非你显式要求非空，比如
pattern=".+"）
哪些 input 类型能用 pattern？
只有 text、search、url、tel、email、password 这六种类型支持 pattern。其他如 number、date、checkbox 用了也无效。
-
type="email"自带基础邮箱格式检查，再加pattern是叠加校验，不是替代 —— 比如pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"可进一步限制域名后缀为小写字母 -
type="url"默认允许任意协议，用pattern="https?://.+"可强制仅接受 http/https 开头 -
type="tel"完全不校验格式，pattern是唯一能加规则的方式（例如pattern="\+?[1-9]\d{1,14}"适配 E.164）
title 属性不是可选的，它是用户友好的关键一环
没设 title 时，Chrome 和 Firefox 会显示“请与所要求的格式匹配”这种毫无信息量的提示。用户根本不知道哪里错了。
-
title内容不会参与校验，只用于展示，所以可以写中文、带标点、甚至 emoji - 例如：
pattern="[A-Za-z]{3}" title="请输入三位英文字母，如 CHN、USA" - 密码类场景建议把规则拆解说明：
title="至少8位，含1个数字、1个小写字母、1个大写字母" - 避免写“格式错误”这种废话，直接告诉用户“要什么”
兼容性和真实限制必须提前知道
IE10+、Chrome 10+、Firefox 4+、Opera 11+ 支持 pattern，但 Safari 直到 10.1 才完全支持（iOS Safari 10.3 起）。更关键的是：它不阻止用户输入非法字符，只在 submit 时拦截。
- 无法监听匹配失败事件，
input或change里拿不到校验结果 - 移动端软键盘不会因
pattern自动切换（比如想输数字却弹出字母键盘），得靠inputmode或type="tel"配合 - 服务端仍需重复校验 ——
pattern可被绕过（禁用 JS、改 DOM、curl 提交） - 复杂逻辑如“密码不能包含用户名”“两次输入需一致”，必须用 JS 实现
真正容易被忽略的点是：pattern 的正则引擎由浏览器实现，不同内核对 Unicode、lookahead（如 (?=.*\d)）的支持程度不一。测试时务必在目标浏览器中真机提交，别只看 console.log 或正则调试网站的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
