minlength在空值时不触发，因其仅校验非空且长度不足的情况；浏览器错误优先级为valuemissing > tooshort，未设required时空值直接跳过校验，故需配合required或js手动判断。
minlength在空值时不触发，是因为它只校验“有值但太短”
minlength根本不管空值——它只在字段非空且长度不足时才参与校验。浏览器 Constraint Validation API 的错误优先级是固定的：valueMissing（空值） > tooShort（长度不足）。只要没加 required，空值直接被当作合法状态跳过，minlength连判断机会都没有。
常见现象：写了 <input type="text" minlength="5">，用户不输任何内容就点提交，表单照样通过；输 2 个字也一样。这不是 bug，是设计如此。
-
minlength不是“最小字符数要求”，而是“非空时的最小长度门槛” - 想让空值也被拦住，必须显式加
required - 如果字段可选但仍有最小长度要求（比如“填了就必须≥5位”），得用 JS 手动判断：
el.value.length ，再调 <code>setCustomValidity()
为什么type="number"加minlength完全没反应
因为 minlength 校验的是字符串 UTF-16 长度，而 input[type="number"] 的 value 是数字或空字符串，不是文本。浏览器压根不走字符串长度判断逻辑，属性存在但被静默忽略。
例如：<input type="number" minlength="6">，用户输 1 或留空，都不会触发 tooShort。Chrome、Firefox、Safari 全部一致行为。
- 有效类型仅限：
text、email、password、search、tel、url、textarea -
number、date、checkbox、hidden等类型加了也白加 - 数字类长度约束必须靠 JS 或后端实现，比如监听
input事件检查el.value.toString().length
移动端和 Safari 的兼容性坑在哪
Safari 直到 v16.4 才完整支持 minlength，iOS 15 及更早版本会静默降级——既不报错也不提示，输入框看起来完全没限制。Android 软键盘的“完成”按钮点击时，部分浏览器甚至不触发原生校验。
这意味着：只靠 minlength + required 在移动端大概率失效，尤其 iOS 用户。
- 必须监听
blur或input事件做兜底校验 - 提示文案在 Safari 中常不显示，只高亮边框；要确保错误信息可见，得配合
aria-live或自定义提示层 - emoji 和组合字符（如 ??）按 UTF-16 码元计数，一个可能算 2 单位，
minlength="5"实际可能只容下 3 个 emoji
为什么改了minlength值后校验没更新
DOM 属性修改后，浏览器不会自动重跑校验逻辑。比如 JS 动态设 el.minlength = "8"，已有的值仍按旧规则判断，checkValidity() 返回的还是旧结果。
必须手动触发验证才能反映新约束：
- 调用
el.checkValidity()或el.reportValidity()才会重新评估 - 如果用
setCustomValidity()清除了自定义错误，也要紧接着调reportValidity()才能恢复原生提示 - 不要依赖属性变更自动生效——这是最容易漏掉的一步
真正麻烦的地方不在写法，而在边界：空值、类型错配、移动端降级、动态改值、emoji 计数……这些点任何一个没兜住，minlength 就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
