input的pattern属性如何验证内容_HTML原生正则校验极简教程-html教程-PHP中文网

pattern属性仅做全字符串匹配且自动添加^和$，不支持unicode属性类、type="number"下失效，需配合title提示和后端严格校验。

input的pattern属性如何验证内容_html原生正则校验极简教程

pattern 属性不执行 JavaScript 正则，它只做全字符串匹配，且自动加 ^ 和 $ —— 写错正则不会报错，但会“看似生效实则失效”。

浏览器内部把 pattern="1[3-9]\d{9}" 当作 ^1[3-9]\d{9}$ 处理，你不需要、也不该手动写 ^ 或 $。显式加上反而可能在某些旧版 Safari 中出问题。

常见错误现象：

pattern="\d+" 本意是“至少一位数字”，结果用户输 "5" 成功，但输 "5a" 失败——这没错；可一旦输 " 5 "（带空格）也失败，因为全串必须匹配，而空格不在 \d 范围内
pattern="[a-z]{3}" 拒绝 "ab"（太短）和 "abc "（末尾空格），这不是 bug，是设计使然

实操建议：

想允许前后空格？用 pattern="^[a-z]{3}$" 不行，得靠 JS trim 后再校验，或改用 pattern="\s*[a-z]{3}\s*"（但注意：空格本身也要被接受）
验证中文姓名？别用 \p{Han}（pattern 不支持 Unicode 属性类），老实用 [u4e00-u9fa5]{2,4}

这是最常踩的坑：<input type="number" pattern="\d{6}"> 中的 pattern 完全不生效。因为 type="number" 有自己的解析逻辑（比如自动过滤非数字字符、允许粘贴科学计数法），浏览器直接跳过 pattern 校验。

使用场景：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

性能影响：pattern 在 submit 时才执行一次，但若正则写成 (a+)+ 这类易回溯爆炸的形式，可能卡住表单提交。

没加 title 的 pattern，Chrome 显示“请与所要求的格式匹配”，Firefox 是“此值不符合指定的模式”，Safari 更简陋——用户根本不知道哪里错了。

实操建议：

title 文案要具体，比如 title="请输入11位手机号，以1开头"，而不是“格式错误”
移动端 Safari 对 pattern 支持弱，部分 iOS 版本直接忽略；不能指望它触发数字键盘，inputmode="numeric" 才是可靠方案
调试时可用 document.querySelector("input").checkValidity() 手动触发，并读 .validationMessage 看实际提示

用户禁用 JS、用 curl 绕过表单、甚至直接改 DOM，都能让任何 pattern 形同虚设。它唯一作用是降低误输率，不是数据守门员。

真正合规的链路是：

前端用 pattern + title + inputmode 做友好引导
后端用白名单字符集（如邮箱只收 ASCII 字母/数字/点/@/连字符）、严格长度、确定性正则（带 ^ 和 $）、号段校验（如手机号查号段库）做最终裁定
别信 type="email" 或 pattern 能拦住所有非法邮箱，test@localhost、我@例.域 都可能过前端但被后端拒掉