HTML中如何用pattern属性进行正则验证

pattern属性仅支持无斜杠、无修饰符的ECMAScript正则字符串，浏览器自动隐式添加^$实现全匹配；它不替代JS验证，因只提交时触发、提示依赖title、移动端Safari对中文Unicode支持弱，且type="number"等类型不生效。

pattern 属性能做基础格式拦截，但不能替代 JavaScript 验证 —— 它只在提交时触发、不支持 ^ 和 $ 显式锚点、错误提示靠 title、移动端 Safari 对中文支持弱，复杂逻辑必须用 JS。

pattern 值怎么写才有效

它不是 JS 正则字面量，不能带 / 斜杠，也不能加 g、i 等标志。浏览器会自动把你的字符串当成全匹配模式（等价于 ^your-pattern$）。

• pattern="[0-9]{6}" ✅ 正确：表示“整个输入必须是且仅是 6 位数字”
• pattern="/^[0-9]{6}$/" ❌ 失效：斜杠和 ^$ 被当作文本，正则无法解析
• pattern="1[3-9]d{9}" ✅ 可用于手机号，但注意 d 在 pattern 中可用（Chrome/Firefox/Edge 支持），Safari 15.4+ 才稳定
• 中文要写 Unicode 范围：pattern="[u4e00-u9fa5]{2,4}"，别用 p{Han}（pattern 不支持 Unicode 属性类）

为什么写了 pattern 却没反应

常见静默失败，不是代码写错，而是触发条件或配套属性缺失。

• input 类型不支持：type="number" 完全忽略 pattern，得换 type="text" 或 type="tel"
• 没加 title 属性：验证失败时浏览器只显示默认模糊提示（如“请与所要求的格式匹配”），用户根本不知道哪里错了
• 表单用了 novalidate：直接禁用了所有原生验证，包括 pattern
• 输入为空且没设 required：空字符串默认通过验证，pattern 不生效
• 移动端 Safari 对 [u4e00-u9fa5] 渲染不稳定，实测部分版本直接跳过校验

如何配合 JS 做可控验证

pattern 只管“能不能提交”，JS 才能控制“什么时候提示、提示什么、高亮哪段”。关键不是重写逻辑，而是补足 pattern 的短板。

立即学习“前端免费学习笔记（深入）”；

• 监听 input 或 blur 事件，调用 setCustomValidity("") 清空旧错误，再根据 test() 结果设新提示
• 用 reportValidity() 主动触发验证（比如按钮点击时），比等 submit 更可控
• 调试时可运行 document.querySelector("input").checkValidity() 查当前状态，配合 validationMessage 看提示文本
• 避免在 input 事件里高频调用 test() 处理长文本，回溯复杂正则（如 (a+)+）可能卡 UI

pattern 是一道轻量入口，但它的“隐式全匹配”和“无反馈机制”决定了它只适合固定格式、低交互场景；一旦涉及实时反馈、组合校验或 Unicode 兼容性，就得立刻切到 JS 控制 —— 别硬扛，也别重复造轮子。