HTML5的input[type="password"]不校验大小写，仅屏蔽显示，大小写有效性由后端或JavaScript控制；pattern属性可做简单正则校验但体验差；推荐用JavaScript实时监听并反馈缺失项，且后端必须重复校验。
HTML5 本身不提供密码大小写敏感或校验逻辑——input[type="password"] 只是屏蔽显示，大小写是否有效完全由后端判断或前端 JavaScript 控制。所谓“设大小写敏感”，其实是你得自己加规则，而不是靠 type="password" 自动生效。
为什么 input[type="password"] 不校验大小写？
它只是个带掩码的文本输入框，和 input[type="text"] 的行为一致：原样提交字符，大小写全量保留。浏览器不会主动拒绝小写字母、也不会提示“需含大写”。是否接受 "abc123" 还是只接受 "Abc123"，取决于你写的验证逻辑。
- 表单提交时，值照常发送，后端没校验就等于没校验
- 用
pattern属性只能做简单正则匹配（且不触发实时反馈） -
required、minlength等属性不管大小写构成
用 pattern 做基础前端校验（有限但够用）
适合轻量场景，比如注册页提示用户“密码必须包含大小写字母和数字”。注意：pattern 是在表单提交时才触发，且只对整个字符串做正则匹配，不支持多条件“且”关系的直观写法。
<input
type="password"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
title="至少8位，含小写字母、大写字母和数字"
required>
- 这个正则中
(?=.*[a-z])是正向先行断言，表示“后面某处有小写字母”，不是“开头必须是小写” - 所有断言必须同时满足，但浏览器兼容性要注意：IE 完全不支持
pattern，Safari 对复杂正则支持较弱 - 用户看不到实时提示，只有提交失败时才弹
title提示，体验较差
用 JavaScript 实时校验并反馈（推荐做法）
真正可控的方式是监听 input 或 blur 事件，调用自定义函数检查字符构成，并更新 UI 状态（如加红/打勾图标、提示文字）。关键点在于别只判“有没有”，要明确告诉用户缺什么。
立即学习“前端免费学习笔记（深入）”；
function validatePassword(str) {
return {
hasLower: /[a-z]/.test(str),
hasUpper: /[A-Z]/.test(str),
hasDigit: /[0-9]/.test(str),
minLength: str.length >= 8
};
}
const pwdInput = document.querySelector('#password');
pwdInput.addEventListener('input', () => {
const result = validatePassword(pwdInput.value);
// 更新对应提示元素的 class 或 textContent
});
- 不要用
onchange——它只在失焦后触发，用户无法及时感知 - 避免每输入一个字符都发请求校验强度（除非用 debounce 节流）
- 后端仍需重复校验：前端可被绕过，
pattern和 JS 都只是用户体验层
最容易被忽略的是：大小写敏感 ≠ 密码强度高。比如 "AAAAAA" 满足“含大写”，但毫无安全性。真正该防的不是“大小写开关”，而是弱口令、字典词、重复字符、键盘序列（"qwerty"）等。校验逻辑越细，越得配合服务端策略同步更新。
