密码输入框必须用type="password"，否则required、pattern、minlength等原生校验失效；误用type="text"或css伪装会绕过所有浏览器校验逻辑，且无法触发密码管理器保存弹窗。
密码输入框必须用 type="password"，否则校验失效
浏览器原生表单校验（required、pattern、minlength 等）只在 type="password" 下生效。如果误写成 type="text" 或漏写 type，即使写了 pattern，提交时也不会触发校验提示。
实操建议：
- 始终显式声明
<input type="password" ...> - 避免用 CSS 伪装文本框（比如
type="text"+ 字体掩码），这会绕过所有原生校验逻辑 - 若需“显示/隐藏密码”切换，只动态切换
type值（"password"↔"text"），不要移除或覆盖pattern等属性
pattern 正则必须匹配整个字符串，且注意转义
pattern 属性的正则默认是“全匹配”，即等价于 ^...$。常见错误是写 pattern="[a-z]+[A-Z]+[0-9]+"，它要求密码**必须**以小写字母开头、大写字母次之、数字结尾——实际需求通常是“至少含一个”，而非“严格顺序”。
正确写法示例（至少含大小写字母和数字各一，长度 8–20）：
<input type="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}" title="密码需包含大小写字母和数字，长度8-20位" required>
注意点：
-
title属性值会作为校验失败时的提示文案，务必写清楚 - 正则中不能使用
/.../g包裹，也不能写 JS 特有语法（如\d在部分旧浏览器支持不佳，建议用[0-9]） - 中文符号、emoji 等 Unicode 字符可能被某些正则引擎截断，如需支持，测试真实输入场景
服务端校验不可省略，前端只是体验层
HTML 的 pattern 和 minlength 完全可被绕过：禁用 JS、手动修改 DOM、用 curl 提交——这些都不会触发前端校验。
所以关键规则必须在服务端重复验证：
- 长度检查（避免超长输入拖慢哈希计算）
- 字符集限制（如禁止空格、控制字符、过长 Unicode 组合）
- 是否与用户名/邮箱雷同（前端无法安全获取这些字段做比对）
- 是否在已知泄露密码库中（如 Have I Been Pwned API）
前端校验唯一作用是减少无效提交、提升用户反馈速度，不是安全防线。
移动端软键盘适配容易被忽略
在 iOS 和 Android 上，type="password" 会触发数字键盘或默认键盘，但加上 inputmode="text" 可能强制弹出全键盘；而 inputmode="numeric" 会导致无法输入字母——这直接破坏“必须含大小写字母”的规则。
稳妥做法：
- 不设置
inputmode，让系统自动选择（iOS/Android 对type="password"通常给出合理键盘） - 如需优化数字输入（如 PIN 码），改用
type="tel"或type="number"，但此时必须放弃原生密码掩码和复杂字符要求 - 测试真机：模拟器常不反映真实软键盘行为
123456! 这类弱密码。校验逻辑本身很简单，落地时得盯住真实设备、真实网络、真实用户怎么输错、为什么输错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
