HTML5表单验证：required与pattern应用

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《HTML5智能表单验证：用required和pattern校验》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

required仅校验非空，pattern才校验格式；pattern需配合text类type，值为无前后斜杠的正则，浏览器自动添加^$，反斜杠需双写，Unicode需用汉字范围或JS处理，空值校验用|^$分支，提示靠title属性。

required 属性只管“填没填”，不管“填得对不对”

很多开发者以为加了 required 就算做了校验，其实它只触发“非空检查”：用户没输任何内容时浏览器才报错，一旦输入一个空格、一个字母、甚至乱码，required 就直接放行。真正决定“格式对不对”的是 pattern，而且它必须配合 type="text"（或省略 type）、type="email" 等可输入文本的类型才能生效。

• pattern 的值必须是正则表达式字符串，**不写前后斜杠 /**（HTML 中不是 JS，别写成 /^\d{6}$/）
• 浏览器默认用 ^ 和 $ 包裹你的 pattern，所以 pattern="123" 实际匹配的是整个字符串等于 "123"，不是“包含 123”
• 如果想允许开头/结尾有空白，得显式写进正则里，比如 pattern="^\s*\d{6}\s*$"

pattern 正则写错会导致“永远校验失败”或“形同虚设”

常见翻车点是忘了转义或误用修饰符。HTML5 的 pattern 不支持 flags（如 i、m），也不支持 \uXXXX Unicode 写法；所有反斜杠都要双写（因为 HTML 属性值先经 HTML 解析，再传给正则引擎）。

<input type="text" pattern="^[a-zA-Z0-9_\u4e00-\u9fa5]{2,10}$" title="用户名只能是中英文、数字、下划线，2–10个字符">

上面这行会出错——\u4e00 在 HTML 属性里会被当成无效字符实体。正确写法是用 一 或干脆改用 JS 控制，或者退一步用 [一-龥]（注意：该范围不覆盖全部汉字，但兼容性好）：

<input type="text" pattern="^[a-zA-Z0-9_一-龥]{2,10}$" title="用户名格式不正确">

把 required 和 pattern 拆开用，能做“条件校验”

比如“手机号可填可不填，但如果填了就必须是 11 位数字”。这时候不能只靠 pattern，因为没填时它不触发；也不能只靠 required，因为它强制必填。解法是：去掉 required，用 pattern 配合“空字符串或合法格式”的正则：

• 允许空：在 pattern 里用 | 分支，比如 pattern="^$|^\d{11}$"
• 更严谨点：避免用户只输空格，写成 pattern="^\s*$|^\d{11}$"，再配合 title 提示“留空或输入 11 位手机号”
• 注意：这种写法在 Safari 旧版本可能不识别 ^$ 分支，稳妥起见可监听 input 事件 + JS 补充判断

pattern 校验失败时的提示语靠 title 属性控制

浏览器原生弹出的错误消息（如 Chrome 显示“请与所要求的格式匹配”）无法直接修改，但你可以用 title 属性提供自定义提示，它会在 hover 或校验失败时显示：

<input type="text" pattern="^\d{6}$" title="请输入6位数字验证码" required>

这个 title 不是装饰用的，它是唯一能影响原生验证提示文案的属性。不过要注意：title 值过长在移动端可能截断，且无法换行；真要精细控制提示，还是得用 setCustomValidity() + JS。

pattern 的正则能力有限，复杂逻辑（比如“密码需含大小写字母和数字”“两次输入密码比对”）没法单靠它完成；别硬塞，该上 JS 的时候就上 JS。

到这里，我们也就讲完了《HTML5表单验证：required与pattern应用》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！