HTML pattern属性仅支持ECMAScript 5.1正则子集，不支持前瞻/后瞻、命名捕获、u/s标志等，且自动隐含^$锚点；JS复用时需手动转义并添加锚点，服务端校验不可依赖前端pattern。
HTML pattern 属性的正则引擎很弱
HTML 表单的 pattern 属性只支持 ECMAScript 5.1 的正则子集，不支持 lookahead、lookbehind、named capture groups、u 或 s 标志，连 d 在某些旧浏览器里都可能不等价于 [0-9]。它本质上是浏览器内置的轻量校验，不是 JS 中的 RegExp 实例。
常见错误现象：pattern="(?=.*[a-z])" 直接被忽略（Chrome 会静默失败，Firefox 可能报错）；pattern="p{L}" 完全无效；pattern="^.{8,}$" 看似工作，但没锚点也默认全局匹配——pattern 自动隐含 ^ 和 $，写进去反而冗余甚至出错。
- 只用基础字符类：
[a-zA-Z0-9_]安全，w在部分 Safari 版本中行为不一致 - 避免量词嵌套：
(a+)+可能触发浏览器正则回溯限制，导致输入卡顿或验证跳过 - 测试务必覆盖 Safari 14–15、Edge 90–100：它们对
pattern的实现差异最大
JS 中用 test() 验证时，别直接复用 pattern 值
HTML 的 pattern 值是字符串，比如 pattern="[0-9]{3}-[0-9]{2}"，你不能直接 new RegExp(inputPattern).test(value) —— 因为它没转义反斜杠，且缺少 ^/$ 锚点（而 HTML 内部自动加了）。更糟的是，若 pattern 含双引号，从 DOM 读取时可能被截断。
正确做法是显式构造带锚点、已转义的正则：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const patternAttr = input.getAttribute('pattern');
// 安全提取：先 decodeURIComponent，再替换未转义的 为 \
const safePattern = patternAttr.replace(/\(?=[^0-9])/g, '\\');
const re = new RegExp('^' + safePattern + '$');
- 永远手动加
^和$：HTML 自动加，JS 不加，行为不一致 - 用户输入含换行？
pattern默认不跨行，但 JS 的/.../若没m标志，^也不会匹配换行后开头——保持单行语义就别加m - 性能影响小，但频繁构造
RegExp对象（如 oninput 中）会触发 GC，建议缓存编译后的正则实例
服务端正则必须独立写，不能抄前端 pattern
服务端（Node.js/Python/PHP）的正则引擎能力远超 HTML，但这也意味着——前端看似“通过”的输入，在服务端用更强正则一跑就挂。典型例子：pattern="[a-z]{2,10}" 允许 "ab"，但服务端若用 re.fullmatch(r'[a-z]{2,10}', s)（Python）或 ^([a-z]{2,10})$（Node），结果一致；可一旦服务端加了 unicode 标志或用了 p{L}，而前端 pattern 没覆盖 Unicode 字母，就会出现“前端说 OK、后端说非法”。
- 前后端正则逻辑必须用同一份 spec 文档定义，而不是靠复制粘贴
- 服务端不要信任
pattern字符串：它可能被用户绕过（禁用 JS、改 DOM、curl 提交），只作参考 - 特别注意空格处理：
pattern="S+"不匹配首尾空格，但服务端若用.trim().length+ 正则，和纯正则逻辑就不等价
reportValidity() 触发的验证不等于正则执行成功
调用 input.reportValidity() 会触发浏览器原生验证流程，包括 required、min/max、pattern，但它返回 true 仅表示“没发现违反规则”，不代表正则真的运行了一遍。例如：pattern 值为空字符串、含语法错误、或浏览器根本不支持该正则特性时，reportValidity() 往往直接返回 true（视为无约束）。
- 不要用
reportValidity()的返回值代替正则校验逻辑，尤其在需要精确控制提示文案时 - 调试时检查
input.validationMessage：若为空但预期有错，大概率是pattern本身语法无效（比如用了?但前面没可选内容） - 移动端 WebView（如微信内嵌）对
pattern支持更碎片化，reportValidity()可能完全不触发 pattern 校验
pattern 的“隐式锚点”和“无错误反馈”机制——它不报语法错，只静默失效；它自动加 ^$，但 JS 复用时忘了补就导致误判。这两点混在一起，比正则能力差异更常引发线上问题。 
