minlength必须与required配合才生效；单独使用无效，且对number、date等非文本类型无效；可选字段需用javascript校验长度。
单独写 minlength 是没用的，必须搭配 required 才会触发“太短”提示；它对 type="number"、type="date" 等非文本类型完全无效。
minlength 必须和 required 一起用才生效
浏览器 Constraint Validation API 规定：空值错误（valueMissing）优先级高于长度不足（tooShort）。不加 required，用户留空或输 2 个字符，都不会触发 tooShort。
-
<input type="text" minlength="6">→ 留空或输 1~5 字，提交时无提示，表单照常提交 -
<input type="text" minlength="6" required>→ 留空报valueMissing，输 1~5 字报tooShort，输满 6 字才通过 - 可选字段（非必填但有最小长度要求）？只能用 JS：
el.value.length 判断后调用 <code>setCustomValidity()
哪些 type 支持 minlength？别往 number 和 date 上硬套
minlength 校验的是字符串 UTF-16 长度，只对语义为“文本输入”的类型起作用。数字、日期类控件压根不走这套逻辑。
- ✅ 有效类型：
text、email、password、search、tel、url、textarea - ❌ 无效类型：
number、date、datetime-local、range、file、checkbox -
<input type="number" minlength="6">在 Chrome 控制台可能警告 “The specified value '6' is not a valid number”，且校验永不触发 - 数字长度限制应改用
min/max+ JS 拦截，或换type="text" inputmode="numeric" pattern="[0-9]{6}"
pattern 里得自己写长度，minlength 不会自动“补进”正则
minlength 和 pattern 是两套独立机制：前者数 UTF-16 码元，后者跑正则匹配（默认隐式带 ^ 和 $）。想同时控格式和长度，就得在正则里显式写清楚。
- 错误写法：
minlength="6" pattern="[a-z]+"→ 用户输 "abcdef"（6 小写字母）能过minlength，但不符合业务规则（比如要求数字） - 正确写法：
minlength="6" pattern="[a-zA-Z0-9_]{6,12}"→ 正则本身已限定 6–12 位，minlength只作辅助提示或兜底 - 中文/emoji 场景注意：
value.length对代理对（如 ??）算 2，而{6,12}在现代浏览器按 Unicode 字符计数，二者口径可能不一致 - 想实时反馈？监听
input事件，用/^[a-zA-Z0-9_]{6,12}$/.test(el.value)+Array.from(el.value).length更可靠
移动端和旧 Safari 要特别小心，JS 回退不是可选项
iOS Safari 直到 15.4 才稳定支持 minlength，更早版本（尤其是 iOS 10.3 前）会静默降级——属性还在 DOM 里，但不校验也不报错。
- 必须监听
input事件（不是keydown），覆盖粘贴、语音输入、拖拽等所有修改路径 - 注意中文输入法：
event.isComposing为 true 时，el.value可能是临时拼音串，直接校验会误报 - 用
el.setCustomValidity()设错后，记得显式调用el.setCustomValidity('')清空，否则后续满足条件也不会恢复通过状态 - 服务端永远要重校验：前端限制全可绕过（curl、DevTools 改 DOM、禁用 JS），且
str.length在服务端不可靠，Node.js 推荐Buffer.byteLength(str, 'utf8')，Python 推荐grapheme-splitter
真正容易被忽略的点是：minlength 不拦截任何输入行为，也不修正已有值；它只是提交时的一层薄提示。如果你需要“输第 6 个字就停”，或者“粘贴超长内容自动截断”，JS 是唯一出路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
