pattern属性是:valid生效的前提，仅对文本类输入有效且需注意全匹配机制、移动端兼容性及js补位校验。
pattern 属性是 :valid 生效的前提
:valid 伪类不会凭空感知内容是否匹配正则——它只响应浏览器原生约束验证状态，而 pattern 是唯一能让文本输入框（如 type="text"）进入该验证流程的 HTML 属性之一。没写 pattern（或 required、type="email" 等），:valid 就永远不匹配，哪怕你 CSS 写得再对。
常见错误现象：样式写了 input:valid { color: green; }，但输入符合正则的内容后颜色不变。原因几乎一定是没加 pattern，或者加了但类型不支持（比如 type="number"）。
-
pattern只对type="text"、type="tel"、type="email"、type="password"等文本类输入生效；type="number"完全忽略它 - 必须显式设置
required才能避免空值绕过校验（否则空字符串默认视为“满足 pattern”，触发:valid） - 移动端若用
type="number"又想走正则，应改用type="text" inputmode="numeric"
正则写法必须适配 pattern 的隐式全匹配机制
pattern 的正则不是 JS 中的 /^...$/ 字面量，浏览器内部会自动加上 ^ 和 $ 做全匹配。所以写 pattern="^[0-9]{6}$" 是错的——开头的 ^ 和结尾的 $ 会被当作文本字面量，导致解析失败；而 pattern="[0-9]{6}" 才正确。
容易踩的坑：
- 误加斜杠：
pattern="/[0-9]{6}/"→ 斜杠被当作文本，正则失效 - 中文字符未双反斜杠：
pattern="[u4e00-u9fa5]+"在 HTML 属性中要写成pattern="[u4e00-u9fa5]+"（Unicode 范围本身不用转义），但点号.必须写成.，而 HTML 中需再逃一次 →\. - 用
.*开头/结尾削弱约束力，例如pattern=".*abc"实际等价于 “以 abc 结尾”，失去长度或起始控制
:valid 样式在用户交互前不触发，初始状态是 :blank
页面刚加载时，一个带 required 和 pattern 的 input 处于 :blank 状态，既不是 :valid 也不是 :invalid。此时你的 input:valid 规则完全不生效——这不是 bug，是浏览器设计行为。
这意味着你不能指望用户一打开页面就看到绿色边框。真实触发时机只有三种：
- 用户聚焦后失焦（
blur） - 用户点击提交按钮或按 Enter 提交表单
- 手动调用
input.checkValidity()（常用于初始化时强制计算状态）
如果需要“首次加载即反馈”，可在 JS 中预设 value 并立即调用 checkValidity()，或模拟一次 blur。
移动端和旧环境下的兼容性盲区
pattern + :valid 组合在 Android 4.4 WebView 和部分 iOS Safari 版本中存在 bug：正则稍复杂（如含 Unicode 范围、嵌套量词）就可能静默失效，且 title 提示在 iOS 上基本不可见。
性能与安全也要留意：
- 避免回溯爆炸式正则，例如
(a+)+或.*a.*b.*c，表单提交时可能卡顿甚至阻塞 UI - 不要依赖
pattern做关键业务校验（如密码强度、手机号归属地），它只是客户端轻量提示层 - 真正需要实时反馈或复杂逻辑时，必须用 JS 补位，并通过
data-valid属性同步状态给 CSS
最易被忽略的一点：你写的正则在 JS 控制台里 /^[0-9]{6}$/.test("123456") 返回 true，不代表放进 pattern 就一定生效——务必真机提交测试，看 checkValidity() 返回值和 validationMessage 内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
