pattern属性仅做全字符串匹配且自动添加^和$，不支持Unicode属性类、type="number"下失效，需配合title提示和后端严格校验。
pattern 属性不执行 JavaScript 正则，它只做全字符串匹配，且自动加 ^ 和 $ —— 写错正则不会报错，但会“看似生效实则失效”。
pattern 的正则必须完全匹配整个输入值
浏览器内部把 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}
type="number" 无视 pattern 属性
这是最常踩的坑：<input type="number" pattern="\d{6}"> 中的 pattern 完全不生效。因为 type="number" 有自己的解析逻辑（比如自动过滤非数字字符、允许粘贴科学计数法），浏览器直接跳过 pattern 校验。
使用场景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 要限制「6位纯数字」（如验证码），必须用
type="text"或type="tel"（后者在移动端更倾向唤起数字键盘） - 需要数值语义（比如无障碍、自动缩放）又想控格式？加
inputmode="numeric"提升体验，再用 JS 补充实时拦截
性能影响：pattern 在 submit 时才执行一次，但若正则写成 (a+)+ 这类易回溯爆炸的形式，可能卡住表单提交。
title 属性不是可选项，是提示刚需
没加 title 的 pattern，Chrome 显示“请与所要求的格式匹配”，Firefox 是“此值不符合指定的模式”，Safari 更简陋——用户根本不知道哪里错了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
title文案要具体，比如title="请输入11位手机号，以1开头"，而不是“格式错误” - 移动端 Safari 对
pattern支持弱，部分 iOS 版本直接忽略；不能指望它触发数字键盘，inputmode="numeric"才是可靠方案 - 调试时可用
document.querySelector("input").checkValidity()手动触发，并读.validationMessage看实际提示
pattern 只是前端提示，后端必须重校
用户禁用 JS、用 curl 绕过表单、甚至直接改 DOM，都能让任何 pattern 形同虚设。它唯一作用是降低误输率，不是数据守门员。
真正合规的链路是：
- 前端用
pattern+title+inputmode做友好引导 - 后端用白名单字符集（如邮箱只收 ASCII 字母/数字/点/@/连字符）、严格长度、确定性正则（带
^和$）、号段校验（如手机号查号段库）做最终裁定 - 别信
type="email"或pattern能拦住所有非法邮箱，test@localhost、我@例.域都可能过前端但被后端拒掉
复杂格式（比如“0–23 的数字 + 逗号 + 00/25/50/75”）容易写错分组和边界，优先拆成 JS 函数验证，pattern 只留最简兜底。
