HTML中如何使用pattern属性进行正则验证
先明确一个核心观点：pattern 属性能做基础格式拦截，但它绝对替代不了 Ja vaScript 验证。为什么这么说？因为它只在表单提交时触发、不支持显式的 ^ 和 $ 锚点、错误提示完全依赖 title 属性、而且在移动端 Safari 上对中文的支持相当弱。但凡涉及复杂逻辑，最终还得靠 JS 出马。
pattern 值怎么写才有效
这里有个关键细节：它的值不是 Ja vaScript 的正则表达式字面量。这意味着，你不能写两边的斜杠 /，也不能加 g、i 这些标志。浏览器会自动把你的字符串当作全匹配模式来处理，相当于隐式地给你加上了 ^ 和 $。
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]这类 Unicode 范围的渲染不稳定，实测部分版本会直接跳过校验。
如何配合 JS 做可控验证
pattern 只管“能不能提交”，而 JS 才能控制“什么时候提示、提示什么内容、高亮哪个部分”。关键思路不是用 JS 重写一遍验证逻辑，而是去补足 pattern 的短板。
立即学习“前端免费学习笔记（深入）”；
- 监听
input或blur事件，先调用setCustomValidity("")清空旧错误，再根据正则的test()结果来设置新的提示信息。 - 使用
reportValidity()方法可以主动触发验证（比如在按钮点击时），这比干等表单提交要可控得多。 - 调试时，可以运行
document.querySelector("input").checkValidity()来检查当前状态，再结合validationMessage属性查看具体的提示文本。 - 要避免在
input事件里高频调用test()来处理长文本，尤其是那些包含回溯的复杂正则（比如(a+)+），否则可能会卡住用户界面。
总而言之，pattern 属性是一道轻量级的入口防线，但它“隐式全匹配”和“缺乏实时反馈”的特性，决定了它只适合固定格式、低交互的场景。一旦涉及实时反馈、组合校验或者对 Unicode 有高兼容性要求，就该立刻切换到 Ja vaScript 来控制验证流程——既不要硬扛，也别重复造轮子。
