pattern属性使用javascript正则引擎但自动添加^和$，故不可显式书写；需直接写核心模式如[0-9]{11}，支持.*[0-9].*等结构，不支持标志或命名捕获组。
pattern属性的正则写法和隐含规则
HTML pattern 属性用的是 JavaScript 正则引擎，但**不支持开头的 ^ 和结尾的 $ 锚点**——浏览器会自动在你写的正则前后加上 ^ 和 $。也就是说，pattern="a+b" 实际等价于 /^a+b$/，而不是 /a+b/。
这意味着：如果你写了 pattern="^a+b$"，实际变成 /^^a+b$$/，几乎永远匹配失败。
- 只写核心模式，比如手机号校验写
pattern="[0-9]{11}"，别加^或$ - 如果需要“至少包含某字符”，用
.*x.*形式（如密码含数字：pattern=".*[0-9].*"） - 空字符串默认不匹配——除非你显式允许，比如
pattern="|a+"（注意：这会匹配空或多个 a，但可读性差，慎用）
常见场景下的 pattern 写法示例
写 pattern 要紧扣表单字段的实际约束，不是越复杂越好。多数情况下，优先用 HTML 原生属性（如 type="email"、min/max），pattern 是补充。
- 中文姓名（2–4 个汉字）：
pattern="[\u4e00-\u9fa5]{2,4}"（注意：没加^/$，且不能匹配空格或英文字母） - 6位纯数字验证码：
pattern="[0-9]{6}"（比type="number"更可靠，后者允许输入 e、+- 等） - 带连字符的车牌号（如粤B-12345）：
pattern="[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵青藏川宁琼使领A-Z]{1}[A-Z]{1}-[A-Z0-9]{5}"（需按实际规则精简） - 非空且不含空格的用户名：
pattern="\S+"（\S匹配非空白字符，+表示至少一个）
pattern不生效？检查这几个地方
pattern 只在表单提交时触发验证，且必须配合 type="text"（或省略 type，默认 text）才能工作；type="number" 会忽略 pattern，因为浏览器用自己的数字校验逻辑。
-
input没有name属性 → 提交时可能被忽略，但不影响 pattern 校验本身；不过某些框架依赖 name，建议始终加上 - 用户输入了空格或换行符 →
\s默认不匹配换行，而textarea不支持pattern，别用错元素 - 正则里用了
\d却在 IE 或旧 Safari 中失效 → 改用[0-9]更稳妥 - 写了
required但用户删光内容 → 此时 pattern 不执行（因为值为空），只有 required 校验起作用
和 JavaScript 正则的细微差异
虽然底层是 JS 引擎，但 pattern 不支持标志（flags），比如不能写 pattern="abc" patternflags="i" —— HTML 规范没这个属性，i、g、m 都无效。大小写敏感必须手动写进正则，例如邮箱本地部分允许大小写：pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"。
- 不支持命名捕获组（
(?<name>...)</name>）、后行断言（(?）等现代特性，IE 和 Safari 16.4 之前都不支持 -
.默认不匹配换行符，这点和 JS 一致；但用户无法输入换行到input[type=text]，所以通常不用考虑 - 移动端软键盘行为受
pattern影响有限，别指望它自动唤起数字键盘——要用inputmode="numeric"或type="tel"配合
pattern 的边界很清晰：它只做简单格式守门员，不是替代后端校验的工具。最容易被忽略的是锚点自动添加机制和 type 与 pattern 的兼容性——写完务必在目标浏览器里真机提交测试一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
