minlength必须与required配合才生效，单独使用无效；仅对text、email等文本类input有效，number等类型不支持；ios safari 15.4前存在兼容性问题，需js回退；后端校验须用utf-8字节长度或图形单元计数，避免unicode代理对导致误差。
minlength必须和required一起写才生效
单独写 minlength="5" 是无效的。浏览器只在字段被标记为必填时，才会检查长度是否达标；否则空值会跳过校验，短输入也不会报错。这是 Constraint Validation API 的硬性规则：空值错误（valueMissing）优先级高于长度不足（tooShort）。
正确写法是：<input type="text" minlength="5" required>
- 用户留空 → 触发
valueMissing错误 - 用户输 3 个字符 → 触发
tooShort错误 - 用户输 5+ 字符 → 通过校验
- 不加
required→ 无论输多少、甚至留空，都不会触发tooShort
哪些 type 支持 minlength
minlength 只对文本语义明确的类型起作用，本质是按字符串 UTF-16 长度校验，所以非文本类输入框完全忽略它。
✅ 有效类型：text、email、password、search、tel、url、textarea
❌ 无效类型：number、date、datetime-local、range、hidden、file
常见踩坑：<input type="number" minlength="6"> 看似写了，但 Chrome 控制台可能警告 “The specified value '6' is not a valid number”，且校验从不触发。
移动端和旧版 Safari 兼容性要特别注意
iOS Safari 直到 15.4 才稳定支持 minlength，更早版本（尤其是 iOS 10.3 之前）会静默降级——属性存在，但不校验也不报错。用户提交时仿佛没写过这个属性。
如果你的目标用户包含 iOS 14 或更老设备，必须用 JS 回退：
- 监听
input事件（不是keydown），覆盖粘贴、语音输入等所有修改路径 - 用
el.setCustomValidity()手动设错，并调用el.reportValidity()触发 UI 提示 - 注意中文输入法的
event.isComposing，避免打断拼音上屏
后端永远要重新校验，不能信前端长度
前端所有限制都可被绕过：curl 提交、DevTools 删除 required、禁用 JS、甚至直接改 DOM 属性。所以后端收到数据后，必须独立判断长度。
关键点：
- 不要直接用
str.length做服务端校验——emoji 和代理对（如 ??）在 UTF-16 下占 2 个码元，.length会高估 - Node.js 推荐用
Buffer.byteLength(str, 'utf8')或第三方库（如grapheme-splitter）按图形单元计数 - Python 中
len(str)同样不可靠，建议先unicodedata.normalize('NFC', s)再统计
真正容易被忽略的是：前端 minlength 校验的是 DOM 元素的 .value 字符串长度，而服务端拿到的可能是经过解码、转义、trim 处理后的值——两端计算口径不一致，错误就藏在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
