minlength必须配合required才能触发tooShort错误；仅minlength时留空或短输入均报valueMissing；非必填字段需JS校验；仅text类输入类型支持；移动端旧版Safari不支持；不实时拦截，需JS实现；后端必须独立校验。
minlength 必须搭配 required 才会触发 tooShort 错误
单独写 minlength="5"，用户输 2 个字符后点提交，浏览器不会提示“太短”，而是报 valueMissing（空值错误）。这是因为 Constraint Validation API 的错误优先级固定为：valueMissing > tooShort > typeMismatch。只有字段非空但长度不足时，tooShort 才有机会生效。
所以必须显式加 required：
-
<input type="text" minlength="5" required>✅ 提交时输 4 字会弹 “请至少输入 5 个字符” -
<input type="text" minlength="5">❌ 留空或输 4 字都只报空值错误，minlength形同虚设 - 可选字段（非必填）但要求“若填则至少 5 字”？
minlength完全不适用，得用 JS 判断el.value.length < 5 && el.value !== ""后调setCustomValidity()
哪些 input type 支持 minlength？无效类型一眼识别
minlength 只对语义上明确为“文本输入”的类型生效，它检查的是字符串 UTF-16 长度，和数字、日期等类型的值模型根本不兼容。
- ✅ 有效类型：
text、email、password、search、tel、url、textarea - ❌ 无效类型：
number、date、datetime-local、month、week、hidden、checkbox、file -
<input type="number" minlength="6">是白写的——DOM 属性存在，但浏览器跳过校验，输 1 也能提交成功 - 移动端注意：iOS Safari 10.3 之前版本静默忽略
minlength，老设备无任何提示
原生 minlength 不实时拦截，想“输第 5 个字就停”必须用 JS
minlength 只在 form.submit() 或手动调 reportValidity() 时检查，它不阻止粘贴、不截断键盘输入、不自动删超长内容。用户粘贴 200 字再点提交，此时才弹提示。
立即学习“前端免费学习笔记（深入）”；
- 要实时限制，监听
input事件（不是keydown），覆盖粘贴、拖拽、IME 上屏等所有修改方式 - 修正 value 用
slice(0, N)，别用substring（负索引不安全） - 中文输入法下，
event.isComposing为 true 时暂不校验，避免打断拼音组合；也可监听compositionend再处理 - Vue/React 等框架中，v-model 或受控组件更新后，DOM 的 validity 状态可能滞后，需
this.$nextTick()或setTimeout(() => el.checkValidity(), 0)延迟检查
后端必须独立校验，前端 minlength 只是体验层
用户禁用 JS、删 HTML 属性、用 curl 提交、直接改 DOM，都能绕过 minlength 和所有 JS 截断逻辑。后端校验不是“补充”，而是唯一可信防线。
- Node.js 示例：
if (req.body.username?.length < 3) return res.status(400).json({ error: '用户名至少3位' }); - 注意中文、emoji（如
??算 2 个 UTF-16 单位）、零宽字符的编码差异，别直接用Buffer.byteLength()替代字符串长度 - 服务端也应做截断或拒绝，不能只依赖前端提示——否则恶意用户可构造超长 payload 拖慢 DB 查询或触发 OOM
minlength 就只是个装饰。 
