html input 的 pattern 属性支持原生正则校验，需加 ^$ 锚点、配合 required 使用，仅对非空值生效，不实时触发，且不可替代服务端验证。
用 pattern 属性写正则校验最直接
HTML 原生支持在 <input> 上通过 pattern 属性绑定正则表达式，浏览器会在表单提交前自动校验。注意：它只在 type="text"、"email"、"tel"、"url" 等非特殊语义类型（如 "number"、"date"）上生效。
常见错误是正则没加锚点导致部分匹配就通过，比如想限制 6 位纯数字却写成 pattern="[0-9]{6}"——输入 "1234567" 也会通过，因为其中包含了连续 6 位数字。
- 务必加上
^和$锚定首尾：pattern="^[0-9]{6}$" - 不需要写
/.../斜杠包裹，HTML 不认 JS 风格的正则字面量 - 建议配合
title属性提供提示文本，失败时会作为默认错误消息显示
required 和 pattern 必须同时用才可靠
单独用 pattern 不会阻止空值提交。如果字段必填，必须显式加 required；否则用户清空输入后点提交，校验直接跳过。
例如手机号校验：<input type="tel" pattern="^1[3-9]\d{9}$" required title="请输入正确的 11 位手机号">。去掉 required 后，空字符串也能通过。
-
pattern只对非空值生效 - 空字符串是否允许，由
required控制，和pattern无关 - 若需“可选但一旦填写就必须符合规则”，得靠 JS 补充逻辑，原生不支持
中文、emoji、全角字符容易踩坑
正则中的 \w、\d 在 HTML 中按 Unicode 处理，但不同浏览器对中文字符的支持有差异。比如 [a-zA-Z\u4e00-\u9fa5] 能匹配大部分汉字，但无法覆盖生僻字或 emoji。
更稳妥的做法是明确排除非法字符，而非枚举合法字符。例如用户名允许中英文数字下划线，可写：pattern="^[a-zA-Z0-9_\u4e00-\u9fa5]+$"，但要注意：
- 某些输入法在中文模式下会输入全角数字/字母，它们不属于
[0-9]或[a-z]，需额外处理（如用[\d]仍不行，得用 Unicode 范围） - emoji 是多码点字符，
.或\w通常无法完整匹配一个 emoji，建议避免用正则约束 emoji 输入 - 移动端软键盘触发的自动补全可能绕过
pattern校验，最终仍需服务端验证
浏览器兼容性和校验时机很关键
pattern 在所有现代浏览器中都支持（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+），但 IE10/11 仅部分支持，且不支持 title 提示。更重要的是，校验只发生在表单提交（submit）或调用 checkValidity() 时，不会实时响应输入。
- 用户输入错误内容后，不点提交就看不到提示——这不是 bug，是规范行为
- 如需实时反馈，必须监听
input或blur事件，用 JS 调用reportValidity()或手动检查 - 移动端 Safari 对
pattern的提示样式较弱，有时只在地址栏闪一下，依赖title文本不一定可见
真正难的不是写对正则，而是理解 pattern 只是客户端轻量提示，不能替代服务端校验；另外，用户粘贴内容、自动填充、屏幕阅读器交互等场景，都可能让原生校验失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
