pattern属性可实现html表单原生正则校验，需配合title提示，但safari支持弱，应加js回退；实时校验需防抖并区分未完成与错误状态；后端必须重校验且注意各语言正则细节。
用 pattern 属性做前端基础校验
HTML 表单原生支持正则校验，pattern 是最轻量、无需 JS 就能拦截明显非法输入的方式。它只在表单提交时触发，不实时反馈，但胜在简单可靠。
常见错误是写错正则含义：比如想要求“至少一个字母 + 至少一个数字”，却用了 [a-zA-Z0-9]+ —— 这其实允许纯字母或纯数字，不符合组合要求。
- 正确写法：
pattern="(?=.*[a-zA-Z])(?=.*d)[a-zA-Zd]{6,}"（6位以上，含至少1字母+1数字） -
title属性必须配套写，否则浏览器不显示提示文字，例如：title="需包含字母和数字，长度不少于6位" - 注意：该正则在 Chrome/Firefox/Edge 中生效，Safari 对
pattern的支持较弱（尤其对(?=...)这类先行断言），生产环境建议补 JS 回退
用 addEventListener('input') 做实时反馈
用户打字过程中就提示是否合规，体验更好，也避免提交后才跳错。关键不是“验证成功”，而是“识别当前状态”——比如高亮输入框边框、显示绿色勾或红色叹号。
容易踩的坑是正则复用不当：直接拿 pattern 里的正则去 test()，可能因首尾锚定（如 ^$）导致中间输入时始终为 false。
- 推荐去掉
^和$，改用：/(?=.*[a-zA-Z])(?=.*d)/.test(value) - 不要每输一个字符都查 DOM 更新 UI，加个
setTimeout防抖（300ms 内连续输入只触发最后一次） - 区分“格式未完成”和“格式错误”：空值或只有字母/只有数字，属于未完成；含中文、符号、空格等，才是错误
后端必须重校验，不能信前端
pattern 和 JS 校验全可绕过：禁用 JS、手动改 DOM、curl 直接 POST。后端校验不是“补充”，而是强制防线。
不同语言实现逻辑一致，但细节有差异：
- Python（Flask）：
re.fullmatch(r'(?=.*[a-zA-Z])(?=.*d)[a-zA-Zd]{6,}', password)（用fullmatch替代search，确保整串匹配） - Node.js（Express）：
/^(?=.*[a-zA-Z])(?=.*d)[a-zA-Zd]{6,}$/.test(req.body.password) - Java（Spring）：
password.matches("(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}")（注意 Java 字符串要双转义\d） - 别忘了：后端还要检查长度上限（防 DOS）、特殊字符黑名单（如控制字符）、是否与用户名雷同等
密码强度提示比“通过/不通过”更有用
用户真正需要的不是“你错了”，而是“差哪一点”。单纯返回“格式不符”只会让人反复试错。
把校验拆成原子条件，逐条反馈更友好：
- 当前长度：
value.length - 含字母：
/[a-zA-Z]/.test(value) ? "✓" : "需含字母" - 含数字：
/d/.test(value) ? "✓" : "需含数字" - 避免用模糊词如“强度中等”，用户无法据此操作；直接说“还差1个数字”最有效
这个逻辑看似简单，但多数项目只做到布尔判断，漏掉了用户最需要的引导信息。真正难的不是写正则，而是把规则翻译成人话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
