HTML原生pattern属性仅在表单提交或checkValidity()时触发，对可编辑input生效，隐式添加^$锚点，不支持g/i等标志，错误提示依赖title；JavaScript用RegExp.test()可实现实时校验、自定义提示与多条件组合。
HTML原生的pattern属性能做什么
HTML本身不执行正则匹配逻辑，pattern只是把正则交给浏览器内置校验器处理，只对 <input type="text">、<input type="email"> 等可编辑控件生效，且仅在表单提交或调用 checkValidity() 时触发。
常见误区是以为它能实时验证或捕获分组——不能。它只判断整个字符串是否匹配（隐式添加 ^ 和 $），也不支持标志如 g 或 i（i 可通过 title 提示用户，但不影响匹配行为）。
-
pattern="[a-z]{3,}"：要求至少3个小写字母，输入"ab"会标红，"abc"通过 - 不要写
pattern="^[a-z]{3,}$"：重复加锚点会被忽略，还可能因转义出错 - 错误提示靠
title属性，例如title="请输入3位以上小写字母"，否则用户只看到“请与所要求的格式匹配”
为什么用JavaScript手动调用RegExp.test()更可靠
原生 pattern 无法做实时反馈、自定义错误文案、组合多条件（比如“密码需含数字+大写字母”），也难以调试匹配过程。此时应监听 input 或 blur 事件，用 RegExp.test() 主动校验。
注意正则字面量和构造函数的区别：/d+/ 是字面量，new RegExp("d+") 需要双转义反斜杠；用户输入的动态正则必须用构造函数，否则会报 SyntaxError。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 实时校验手机号：
const phoneRe = /^1[3-9]d{9}$/; if (!phoneRe.test(input.value)) { ... } - 避免重复创建正则对象：提取为常量或闭包内缓存，否则频繁调用
input事件会降低性能 - 慎用
g标志：带g的正则在多次test()调用时会维护lastIndex，导致偶发失败，去掉即可
form.reportValidity() 和 constraint validation API 的实际作用
reportValidity() 会触发表单内所有原生约束（包括 required、minlength、pattern）的校验并显示默认气泡提示，但它**不会**运行你用 JavaScript 写的自定义逻辑。想统一管理，得手动设置 setCustomValidity()。
- 清除自定义错误：
input.setCustomValidity("")，否则后续reportValidity()一直报错 - 设置错误：
input.setCustomValidity("密码强度不足")，此时input.checkValidity()返回false - 不要混用：如果同时写了
pattern和setCustomValidity()，后者优先级更高，前者被绕过
正则校验容易被忽略的边界问题
用户粘贴内容、全角字符、不可见空格（如 u200b）、emoji 都可能导致看似“符合正则”实则业务异常。单纯依赖前端正则不安全，后端必须重验。
- 邮箱校验别只用
pattern=".+@.+..+"：它会放行"@."这类非法值，RFC 5322 太复杂，建议用简单模式 + 后端 SMTP 验证 - 中文姓名用
[u4e00-u9fa5]{2,4}不够：含少数民族姓名、中英文混合、生僻字仍会漏判 - 密码强度正则若写成
(?=.*d)(?=.*[A-Z]).{8,}，记得在 JS 中用new RegExp(...)构造时，字符串里的反斜杠要写成"(?=.*\d)"
正则只是第一道过滤网，它的表达能力有限，而用户输入永远比你想到的更离谱。
