pattern属性仅做隐式全匹配正则校验，等价于/^…$/，不支持函数式模式匹配；需避免斜杠、修饰符及错误转义；title用于提示但非无障碍；对type="number"无效，复杂场景须用js补位。
HTML 本身没有“Pattern Matching”这个编程概念，pattern 属性只是表单验证用的正则字符串匹配机制，不是函数式语言里的模式匹配（如 Haskell 的 case 或 Rust 的 match）。别被名字误导——它不拆解结构、不绑定变量、不支持守卫条件，只做「整个输入值是否完全符合某正则」这一件事。
pattern 属性到底匹配什么
浏览器把 pattern 值当作一个**隐式全匹配正则**处理：自动加上 ^ 和 $，且强制要求整个字符串从头到尾都得吻合。你写的 pattern="[0-9]{6}" 等价于 JS 中的 /^[0-9]{6}$/.test(value)，不是 .search() 或 .includes()。
- 输入
"123456"→ ✅ 通过 - 输入
"abc123456"→ ❌ 失败（没吃掉前面的abc） - 输入
"123456 "（末尾空格）→ ❌ 失败（空格不被[0-9]{6}匹配） - 想匹配“任意前缀 + 六位数字”，得写
pattern=".*[0-9]{6}$"，不能只写[0-9]{6}$
pattern 里正则怎么写才不报错
它不是 JavaScript 的 RegExp 字面量，不接受 /.../g 写法，也不认修饰符（i、g、u），所有内容都是纯字符串，由浏览器以 u（Unicode）标志编译。常见翻车点：
- ❌
pattern="/^[a-z]+@.+$/"—— 斜杠会被当作文本，正则直接解析失败 - ❌
pattern="[a-z]+\.[a-z]+"——\.是冗余转义，Unicode 正则中.在字符类外才有元字符意义，此处.就是字面点，加反斜杠反而非法 - ❌
pattern="[a-z-A-Z]"——z-A被当成 Unicode 范围，但z码点大于A，范围无效，整个 pattern 被忽略 - ✅ 正确写法：
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"，连字符-放在字符类末尾或开头，.、+、(等在[]内无需转义
title 属性不是可选项，是提示刚需
pattern 验证失败时，浏览器只显示默认文案（如“请与所要求的格式匹配”），用户根本不知道该填啥。而 title 是唯一能自定义提示的方式：
<input type="text" pattern="[0-9]{6}" title="请输入6位数字验证码">- 注意：移动端 hover 不生效，
title文案只在桌面端悬停可见；真要实时反馈，必须用 JS 监听input事件 +checkValidity() - 别依赖
title做无障碍支持——它不是 ARIA label，屏幕阅读器不一定读；需要可访问性，得配合aria-invalid和aria-describedby
pattern 对 type="number" 完全无效
这是最容易忽略的兼容性断点：type="number" 会提前把输入转成数字（比如删掉前导零、过滤非数字字符），导致 pattern 拿到的值早已不是原始字符串。例如：
-
<input type="number" pattern="0[0-9]{2}">—— 输入012，浏览器可能自动变成12，然后pattern校验"12"，必然失败 - ✅ 正确做法：改用
type="text"或type="tel"（后者在移动键盘上呼出数字键盘，体验不差），再用inputmode="numeric"辅助 - 如果真要限制数值范围，用
min/max属性，别硬套pattern
真正难的从来不是写出一个“看起来对”的正则，而是理解浏览器怎么解释它、在哪种输入下会静默失效、以及什么时候必须切到 JS 层补位。比如带空格的姓名+编号组合、含特殊 Unicode 字符的用户名、或需要排除前导零的 ID——这些场景下，pattern 很快就力不从心，test() + trim() + 自定义 setCustomValidity() 才是实际项目里的标准动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
