minlength必须与required配合使用才生效，单独设置无效；仅对text、email、password等文本类input有效，不适用于number、date等类型；需与pattern协同时应将长度逻辑写入正则，且后端须用utf-16安全方式校验。
minlength 必须和 required 一起用才生效
单独写 minlength="6" 不会触发任何校验。浏览器只在字段被标记为必填时，才会检查长度是否达标；否则空值跳过、短输入也不报错。这是 Constraint Validation API 的硬性规则：空值错误（valueMissing）优先级高于长度不足（tooShort）。
正确写法是：<input type="text" minlength="6" required>
- 用户留空 → 触发
valueMissing错误 - 用户输 5 个字符 → 触发
tooShort错误 - 用户输 6+ 字符 → 通过原生校验
哪些 input 类型支持 minlength
minlength 只对语义上属于“文本输入”的类型起作用，本质是按字符串 UTF-16 码元长度校验。它对非文本类输入完全无效，且浏览器不会警告或提示。
- ✅ 有效类型：
text、email、password、search、tel、url、textarea - ❌ 无效类型：
number、date、datetime-local、range、hidden、file、checkbox
常见错误：<input type="number" minlength="6"> —— 属性存在，但校验从不触发，Chrome 控制台可能还报 “The specified value '6' is not a valid number”。
minlength 和 pattern 怎么协同用
二者独立运行，不自动联动。minlength 只数长度，pattern 只跑正则；浏览器分别检查，失败时只显示第一个不满足的（通常是 minlength 先被检测）。
想同时限制长度和格式？必须把长度逻辑显式写进 pattern，minlength 仅作辅助提示或兜底：
- 错误写法：
minlength="6" pattern="[a-z]+"→ 用户输 "abcdef" 就过了minlength，但内容不符合业务要求（比如缺数字） - 正确写法：
minlength="6" pattern="[a-zA-Z0-9_]{6,12}"→ 正则里已含长度约束，minlength提供更早的 UI 提示
注意：pattern 默认隐式加 ^ 和 $，是全字符串匹配；而 minlength="6" 不会让正则自动变成 {6,}，你得自己写。
移动端和旧版 Safari 的兼容性坑
iOS Safari 直到 15.4 才稳定支持 minlength，更早版本（尤其是 iOS 14 及以前）会静默忽略——属性还在 DOM 里，但不校验、不报错、不阻断提交。
- 必须用 JS 回退：监听
input事件（不是keydown），覆盖粘贴、语音输入等所有修改路径 - 用
el.setCustomValidity()手动设错，并调用el.reportValidity()触发 UI 提示 - 注意中文输入法的
event.isComposing，避免在拼音未上屏时误判为空或超短
真正容易被忽略的是：前端所有限制都可被绕过。后端收到数据后，必须用语言原生方式重新校验长度，且不能直接依赖 str.length —— emoji 和代理对会导致 UTF-16 码元数与真实图形单元数不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
