html5 pattern仅支持简单格式初筛，无法处理复杂校验；真正复杂的表单校验需结合javascript手动控制，包括跨字段联动、异步验证及动态规则等。
HTML5 的 pattern 属性能直接在浏览器端做基础正则校验，但它的能力有限——只支持单行匹配、不支持标志（如 g、m）、不触发实时反馈，且错误提示不可定制。真正“复杂”的表单校验，不能只靠 pattern，而要结合 JavaScript 手动控制。
pattern 本身只做简单格式初筛
pattern 的作用是：当用户提交表单（或调用 checkValidity()）时，浏览器用你写的正则去匹配整个输入值（等价于 ^your-pattern$）。它不支持：
- 多行文本（
textarea不支持 pattern） - 忽略大小写（除非正则里显式写
[a-zA-Z]或用(?i)，但部分老浏览器不支持） - 条件匹配、环视、Unicode 属性类（如
\p{L}）等高级语法 - 动态逻辑（比如“密码需含数字且不能和用户名相同”）
用 JavaScript 补足 pattern 的短板
把 pattern 当作视觉提示（placeholder 级别的参考），实际校验交给 JS：
- 监听
input或blur事件，用RegExp.test()或String.match()做完整正则判断 - 调用
setCustomValidity()设置更准确的错误消息（setCustomValidity('')表示通过） - 配合
:valid/:invalidCSS 伪类做样式反馈
例如校验“8–20位，至少1个大写字母、1个小写字母、1个数字、1个特殊字符”：
const pwdInput = document.getElementById('password');
pwdInput.addEventListener('input', () => {
const v = pwdInput.value;
const ok = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,20}$/.test(v);
pwdInput.setCustomValidity(ok ? '' : '密码需含大小写字母、数字和特殊字符，长度8–20位');
});
避免 pattern 和 JS 正则不一致
常见陷阱是 HTML 中写了 pattern="[0-9]{3}-[0-9]{2}"，JS 却用 /^\d{3}-\d{2}$/ ——表面一样，但 pattern 自动加了 ^ 和 $，JS 手写时若漏掉锚点，可能误判。建议：
- JS 中统一使用带
^和$的完整正则，与 pattern 行为对齐 - 把正则提取成常量，复用在 pattern 属性和 JS 中（字符串需转义反斜杠）
- 用
new RegExp(patternStr)动态构造，便于维护
复杂场景必须脱离 pattern 单独处理
以下情况 pattern 完全无能为力，必须用 JS：
- 跨字段联动校验（如“确认密码”需和“新密码”一致）
- 异步校验（如检查用户名是否已被注册）
- 输入过程中高亮错误位置（如标红不符合规则的字符）
- 根据业务规则动态切换正则（如不同国家手机号格式不同）
此时应禁用 pattern，完全由 JS 控制 setCustomValidity 和 UI 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
