maxlength仅对type="text"等字符串类型有效，type="number"会忽略它；minlength必须配合required才能触发“太短”提示；可选昵称且要求非空即≥2字需用js校验。
maxlength 能拦住超长输入，但仅对 type="text" 有效；minlength 必须配 required 才提示“太短”；真要控制昵称长度，光写属性远远不够。
为什么 input type="number" 加 maxlength 没用
很多开发者把昵称框误设为 type="number"（比如想防中文），结果发现 maxlength="12" 完全不生效。这是因为浏览器根本不把 number 当字符串处理——它只认 min/max，maxlength 和 minlength 都被静默忽略。
- ✅ 正确类型：
type="text"、type="search"（语义更贴昵称） - ❌ 错误类型：
type="number"、type="tel"（后者虽支持maxlength，但会触发数字键盘，影响中文输入体验） - ⚠️ 注意：
type="search"默认maxlength="524288"，不显式写仍算“不限制”
minlength 不报错？检查是否漏了 required
写了 minlength="2" 却没提示，大概率是因为没加 required。原生校验错误优先级固定：valueMissing（空） > tooShort（太短） > patternMismatch（格式错）。用户留空时，浏览器永远先报“请填写此字段”，根本不会走到长度判断。
- ✅ 触发
tooShort的写法：<input type="text" minlength="2" required> - ❌ 无效写法：
<input type="text" minlength="2">（输 1 字 + 提交 → 无提示） - ? 可选昵称但要求“非空即 ≥2 字”？只能用 JS：
el.value && el.value.length + <code>setCustomValidity()
粘贴、IME、emoji 导致长度“不准”的真实原因
maxlength 按 UTF-16 码元计数，不是人眼看到的字数。一个普通汉字是 1 个码元，但像 “??” 这种组合 emoji 是 4 个码元（2 个代理对），maxlength="5" 下输 2 个就满了，还可能显示为乱码。
- 中文输入法（如搜狗）在 IME 上屏前，
input事件可能拿到中间状态（如 “ni”），此时.length不代表最终字符数 - 移动端粘贴长文本后，部分 WebView（尤其旧版 iOS）不会自动截断，需监听
paste事件手动slice() - 实时统计剩余字数时，别直接用
el.value.length显示——遇到 emoji 会误导用户，建议用Intl.Segmenter（现代浏览器）或降级为简单计数并注明“按系统字符计”
后端校验不能省，且不能只比 .length
前端所有限制都可被绕过：curl -d "nickname=1234567890123"、DevTools 改 DOM、禁用 JS 后直接提交……后端拿到的值，必须重新验证。
- 数据库字段长度（如 MySQL
VARCHAR(12)）是硬边界，超长插入会失败 - 如果业务要求“UTF-8 字节数 ≤ 36”（例如兼容旧系统），
"你好".length === 2，但new TextEncoder().encode("你好").length === 6，二者完全不同 - 别信
request.body.nickname.length—— Node.js 的String.prototype.length仍是 UTF-16 码元数，和前端maxlength行为一致，但不等于字节长度
真正难的不是写 maxlength="12"，而是意识到：它既不阻止粘贴，也不修正已存在的超长值，更不感知 emoji 或 IME 状态。你得在 input、paste、compositionend 多个事件里补逻辑，还得让后端用字节而非字符做最终裁定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
