密码输入框用pattern属性仅做提交校验，需配合input事件实时过滤非法字符，并在服务端重复校验。
密码输入框怎么用 pattern 属性限制特殊字符
HTML5 的 pattern 属性可以直接在 上做客户端初步校验，但要注意：它只影响表单提交时的验证行为，不阻止用户输入，也不实时拦截。真正防无效输入得靠 JavaScript 配合。
比如禁止所有特殊字符（仅允许字母、数字、下划线、短横线），可写成：
注意：pattern 值是正则表达式字符串，**不带 / 开头结尾**；title 是验证失败时的提示文案，必须设置才显示。
- 浏览器原生验证只在表单
submit时触发，用户仍可粘贴含特殊字符的内容 - 移动端软键盘可能不受
pattern影响，iOS Safari 对pattern支持较弱 - 正则中若要允许空格，需显式加
\s，但密码场景通常应排除空格
用 input 事件 + replace 实时过滤特殊字符
想让用户“输不进去”特殊字符，得监听 input 事件并主动清理值。关键点在于：不能直接改 e.target.value 后再调 e.preventDefault()（无效），而要用 setSelectionRange 保光标位置。
立即学习“前端免费学习笔记（深入）”；
一个稳妥做法：
const pwdInput = document.querySelector('input[type="password"]');
pwdInput.addEventListener('input', function(e) {
const cleaned = e.target.value.replace(/[^a-zA-Z0-9_-]/g, '');
if (cleaned !== e.target.value) {
const pos = e.target.selectionStart;
e.target.value = cleaned;
// 重置光标到删除后的位置（避免跳到末尾）
e.target.setSelectionRange(pos - (e.target.value.length - cleaned.length), pos - (e.target.value.length - cleaned.length));
}
});-
replace(/[^a-zA-Z0-9_-]/g, '')表示“删掉所有不在白名单里的字符” - 不推荐用
keypress：无法拦截粘贴、IME 输入、右键粘贴等场景 - 如果允许中文，正则得改成
/[^\u4e00-\u9fa5a-zA-Z0-9_-]/g，但密码一般不建议支持中文
服务端必须重复校验，前端限制只是体验优化
任何前端限制都可被绕过——禁用 JS、手动发请求、抓包重放，所以后端必须用相同规则再校验一次。常见疏漏：
- 后端只校验长度，忽略字符集限制
- 正则写错：比如写成
^[a-zA-Z0-9_-]*$却忘了^和$，导致部分匹配就通过 - 数据库字段长度设太短（如 VARCHAR(16)），但允许用户输 20 位带特殊字符的密码，清洗后截断引发逻辑异常
Node.js Express 示例校验逻辑：
if (!/^[a-zA-Z0-9_-]{8,32}$/.test(req.body.password)) {
return res.status(400).json({ error: '密码只能包含字母、数字、下划线或短横线，长度 8–32 位' });
}为什么不用 oninvalid 或 setCustomValidity 做主控
oninvalid 和 setCustomValidity 适合补充提示，不适合做输入控制。它们只在验证阶段生效，对已输入的非法字符无清理能力。
- 调用
setCustomValidity('xxx')后，必须紧接着调setCustomValidity('')才能恢复有效状态，否则后续合法输入仍报错 - 无法阻止用户在密码框里先输入
abc@123，再删掉@—— 这时invalid事件根本不会触发 - 移动端 WebView 中，
oninvalid触发时机不稳定，常比预期晚一拍
真正需要“防无效输入”，就得接受：前端过滤靠 input 事件 + 正则清洗，后端校验靠独立逻辑，两者缺一不可。光靠 HTML 属性或单点 JS 监听，总会漏掉粘贴、自动填充、调试器篡改这些路径。
