别再只会写 JS 校验了，HTML 的 pattern 属性能帮你省一半事

做后台管理系统或者用户中心时，表单验证绝对是绕不开的坎。以前咱们习惯撸起袖子就是 JavaScript，监听 input 事件，手写一堆正则，结果逻辑代码全堆在输入框事件里，维护起来头都大。其实 HTML5 自带的 pattern 属性，有时候能把最基础的基础校验活儿干了，既轻量又原生。

它是干什么的？

简单来说，pattern 就是一个挂载在 <input> 标签上的正则匹配器。当用户点击提交按钮时，浏览器会默认拿着输入的内容去跑一遍这个正则。如果不匹配，表单就无法提交，并且浏览器会弹出原生的错误提示。

这意味着你不用写一行 JavaScript，就能搞定“必填且符合格式”的检查。这招特别适合那些结构简单、标准明确的字段，比如固定格式的手机号或邮箱。

几个拿来即用的例子

实战中，我们不需要每次都从零开始造轮子。针对国内常见的场景，可以直接参考下面这些写法：

手机号验证是最常用的需求。虽然三大运营商的规则偶尔变动，但核心格式相对稳定：

<input type="text" name="phone" pattern="^1[3-9]\d{9}$" title="请输入 11 位有效手机号">

这里用了 ^ 和 $ 确保从头到尾完全匹配，避免用户前后多输空格或字符导致误判。

密码强度校验也可以塞进去。如果只需要限制数字加字母的组合，可以这样写：

<input type="password" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$" title="需包含字母和数字，长度 6-12 位">

不过要注意，正则越复杂，可读性越差，太复杂的校验逻辑还是建议留给后端或专门的 JS 库处理。

别忽视 title 属性的体验价值

很多新人用 pattern 时容易踩一个坑：写了正则却忘了配 title 属性。

一旦验证失败，浏览器默认的报错文案通常是“请按照要求的格式填写”，这话说了等于没说。用户在移动端操作时，看着这个提示根本不知道哪里错了。加上 title 后，它可以作为浏览器弹窗的错误文案展示，直接把“为什么错”告诉用户，交互成本瞬间降低。

警惕 required 和 pattern 的配合陷阱

这里有个逻辑细节特别容易被忽略：设置了 pattern 并不代表不能为空。

如果你在 input 上只加了 pattern="^\d+$"，而没加 required，那么用户留空提交时，验证居然会通过。因为大多数浏览器认为“空字符串”也是匹配的（除非正则强制要求至少一位）。

所以，正确的姿势通常是组合拳：

<input type="text" required pattern="^\d+$" title="此项不能为空且必须为纯数字">

只有同时具备这两个属性，才能真正实现“非空且格式正确”的闭环校验。

什么时候该放手交给 JS？

虽然 pattern 很方便，但它不是万能的。正则的能力边界有限，如果遇到跨字段的联动校验（比如两次密码输入是否一致），或者需要根据动态数据变化的验证规则，原生属性就力不从心了。这时候继续强行塞正则反而会让代码变成维护灾难。

把它当作前端防御的第一道防线，拦截掉最明显的格式错误，剩下的复杂逻辑再由 JS 接管，这种分层处理的思路能让你的代码更健壮。下次遇到表单验证需求，不妨先想想能不能用几行 HTML 属性解决，毕竟简单好用的方案，往往才是最好的方案。