应使用 minlength：它原生支持、语义清晰、无障碍友好，且能触发浏览器默认验证ui；需配合 required 使用，对 type="password" 和 type="text" 均有效，ie10+ 兼容，搭配 title 可自定义提示。
密码长度校验该用 minlength 还是 pattern？
直接用 minlength 就够了，它原生支持、语义清晰、无障碍友好，且能触发浏览器默认的表单验证 UI。除非你要同时限制长度上下限或混入其他规则（比如必须含数字），否则别绕路写 pattern —— 那会把简单问题复杂化，还容易漏掉空格处理或 Unicode 边界问题。
常见错误是只加 minlength="8" 却忘了设 required：没这个属性，空值会被跳过校验；另外，minlength 对 type="password" 有效，但对 type="text"（比如“显示明文密码”场景）也照样生效，无需额外适配。
-
minlength是 HTML5 原生属性，所有现代浏览器都支持，IE10+ 也兼容 - 它只校验字符串长度（UTF-16 code units），对中文、emoji 等多字节字符计数准确
- 搭配
title属性可自定义提示文字：title="密码至少8位"
JavaScript 手动校验时为什么 .length 不可靠？
因为用户可能粘贴带首尾空格的密码，或输入全角字符（如中文数字、空格），而 .length 直接返回 UTF-16 长度，看起来是 8，实际有效字符可能不足。更糟的是，有些键盘输入法会在末尾自动补空格。
正确做法是先 .trim() 去首尾空格，再判断长度；如果业务要求禁止中间空格，还得加 .includes(' ') 检查：
const pwd = input.value.trim(); if (pwd.length
- 永远在 JS 校验前调用
.trim()，避免空格干扰长度判断 - 不要用
RegExp匹配长度（如/^.{8,}$/），它不处理空格，也不如.trim().length直观 - 服务端仍需重复校验 —— 前端校验只是体验优化，不是安全防线
如何让密码长度提示实时反馈给用户？
监听 input 事件比 blur 更友好，用户每敲一个键就能看到进度。但别频繁重绘 DOM，用一个 <span></span> 实时更新剩余/已满足位数即可。
关键点在于区分“当前输入长度”和“是否通过校验”：前者用于提示（如“还差2位”），后者决定按钮是否可提交。两者逻辑要分开维护，避免把 UI 状态耦合进校验逻辑里。
- 用
input.addEventListener('input', ...)，不用keyup—— 支持粘贴、拖拽等输入方式 - 提示文案建议用正向表达：“已满足”比“还差X位”更不易引发焦虑
- 注意移动端软键盘唤起后，
input事件可能延迟触发，可加setTimeout(..., 0)微任务兜底
服务端校验时要注意哪些长度陷阱？
前端传来的密码字符串，服务端拿到后第一件事不是直接算 .length，而是检查是否被截断或编码异常。常见坑是：HTTP 请求头中 Content-Length 被代理误改、JSON 解析时 Unicode 转义失败、ORM 自动 trim 字段（如某些 MySQL text 类型 + STRICT_TRANS_TABLES 模式）。
Node.js 示例（Express）：
const pwd = req.body.password; if (typeof pwd !== 'string' || pwd.trim().length
- 永远先做类型判断：
typeof pwd === 'string'，防止传null或undefined导致.trim()报错 - 数据库字段长度要留余量：设为
VARCHAR(255)而非刚好CHAR(8)，方便未来加盐哈希后存储 - 别信客户端传来的长度值 —— 服务端必须重新计算，这是唯一可信入口
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
