minlength 控制密码最小长度，pattern 用正则校验字符组成，二者并列且独立验证；必须用 ^ 和 $ 锚定正则，避免子串匹配误判；移动端需警惕 type="password" 与 pattern 触发错误键盘，推荐 js 主导验证并 trim() 预处理。
minlength 和 pattern 在密码输入中各自管什么
minlength 只控制字符数量，不区分类型；pattern 则基于正则表达式做内容校验。两者是并列关系，不是嵌套或增强关系——浏览器会分别检查：先看长度够不够，再看是否匹配正则。如果只写 pattern 而没设 minlength，用户输一个字符就可能触发正则失败（比如要求至少一个数字），但错误提示会笼统显示“与要求不符”，不如长度不足时的提示明确。
常见误区是以为加了 pattern 就不用 minlength，其实它们解决的是不同维度的问题：
-
minlength="8"阻止用户在输入框里只打 3 个字母就点提交 -
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+"确保这 8 个字符里至少含小写、大写和数字各一
pattern 正则必须用 ^ 和 $ 包裹才可靠
不加锚点的 pattern=".*[a-z].*" 实际等价于“只要中间某处有小写字母就行”，用户输 "12345678" 也会通过（因为 .* 能匹配空字符串）。真正生效的写法必须显式限定首尾：
<input type="password" minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d!@#$%^&*]{8,}$">
注意几点：
- 开头的
^和结尾的$是必须的，否则正则只做“子串匹配” -
[A-Za-z\d!@#$%^&*]明确允许的字符集，避免用户输中文、空格等意外字符 - 末尾的
{8,}和minlength="8"功能重复，但保留双保险更稳妥（minlength是 HTML5 原生验证，pattern是正则级约束）
移动端键盘和用户体验的隐性冲突
iOS Safari 和部分安卓浏览器在 type="password" 下默认弹出数字键盘（尤其当 pattern 被识别为“纯数字”时），哪怕你写了 pattern 要求大小写字母——这会导致用户根本打不出字母，表单卡死。
解决办法只有两个：
- 把
type改成"text"，靠 CSS 隐藏文字：input[type="text"] { text-security: disc; }（兼容性有限，iOS 旧版不支持） - 或放弃
pattern的复杂校验，改用 JS 在提交前做完整验证，并用setCustomValidity()控制提示文案
真实项目里，后者更可控：input 保持 type="password"，去掉 pattern，用 JS 监听 blur 或 submit 事件校验强度，失败时调用 input.setCustomValidity("密码需包含大小写字母和数字")。
浏览器原生验证的边界在哪
minlength 和 pattern 都属于 HTML5 表单约束 API，但它们不校验空格、不处理粘贴、不防绕过。用户复制带前后空格的密码进来，minlength 会把空格算进去，pattern 却可能因空格导致匹配失败——而原生验证不会自动 trim()。
所以实际部署时，必须配合 JS：
- 提交前对值执行
.trim() - 若允许空格，正则里要显式包含
\s；若不允许，就在pattern字符集中排除它 -
title属性可补充提示，但仅作参考：title="至少8位，含大小写字母和数字"，不能替代逻辑校验
minlength 当最基础的长度兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
