必须用 JavaScript 配合 input 事件和正则表达式；pattern 仅支持基础格式约束、提交时触发、不兼容旧浏览器、无法实时反馈且逻辑组合受限。
密码校验该用 pattern 还是 JavaScript？
直接说结论：pattern 只能做基础格式约束（比如长度、字符类型），无法实时反馈、无法兼容旧浏览器、也不支持逻辑组合判断（如“必须含大小写字母且至少一个数字”）。真要可靠校验，必须用 JavaScript 配合 input 事件和正则表达式。
pattern 的实际能力与局限
它只在表单提交时触发，且仅对 type="text" 或 type="password" 生效。浏览器会用它生成原生提示，但不保证所有正则语法都被支持（比如 (?=.*\d) 这类先行断言在 Safari 旧版本里会直接失效）。
常见错误现象：pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}" 在部分 iOS Safari 中被忽略，表单照样提交。
如果非要写，建议降级为简单写法：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<input type="password" pattern="[a-zA-Z0-9]{8,}" title="至少8位字母或数字">
- 避免使用
^和$—— 浏览器自动加锚点 - 不要依赖
?=，改用字符集组合（如[a-z][A-Z][0-9]无法表达“至少各一个”，只能退而求其次） -
title属性必须写，否则用户看不到提示
用 JavaScript 做实时校验的关键点
核心是监听 input 事件（不是 change），并在每次输入后执行校验逻辑。重点不是“写对正则”，而是“分层反馈”和“避免误判”。
示例逻辑（可直接复用）：
const pwd = document.getElementById('password');
const feedback = document.getElementById('pwd-feedback');
pwd.addEventListener('input', () => {
const value = pwd.value;
const checks = [
{ test: value.length >= 8, msg: '长度不足8位' },
{ test: /[a-z]/.test(value), msg: '缺少小写字母' },
{ test: /[A-Z]/.test(value), msg: '缺少大写字母' },
{ test: /\d/.test(value), msg: '缺少数字' },
{ test: /[^a-zA-Z0-9]/.test(value), msg: '缺少特殊字符' }
];
const failed = checks.filter(c => !c.test);
feedback.textContent = failed.length ? failed.map(c => c.msg).join('；') : '';
});
- 每个规则独立判断，避免把所有逻辑塞进一个正则里 —— 调试困难，且无法精准反馈哪条没过
- 用
/[a-z]/.test(value)比value.match(/[a-z]/)更轻量，也更安全（空字符串不会报错） - 别在
blur时才校验 —— 用户打完字就想知道结果 - 注意中文输入法下
input事件可能触发多次（如拼音选词过程），但现代浏览器已基本处理得当，无需额外防抖
为什么不能只靠前端校验？
所有前端校验都可绕过：禁用 JS、手动修改 DOM、用 curl 提交。所以 pattern 和 JavaScript 都只是用户体验优化手段，不是安全边界。
真正起作用的永远是后端校验，而且必须用服务端语言（如 Python 的 re.fullmatch、Node.js 的 RegExp.test）重新执行相同规则。
容易被忽略的地方：前后端正则行为可能不一致。比如 JavaScript 的 \d 匹配 ASCII 数字，而 Python 的 \d 默认匹配 Unicode 数字（含阿拉伯数字等）。上线前务必用相同测试用例比对两端输出。
