minlength仅对text、email、password、search、tel、url、textarea有效，对number等类型无效；需配合required才触发tooShort错误；实时截断和可选字段校验须用JS；后端必须重复校验。
minlength 不是“一写就生效”的长度开关，它只在特定条件下参与原生校验，且对多数常见类型（如 number、date）完全无效。
哪些 type 支持 minlength？无效类型一眼识别
浏览器只对文本语义明确的输入类型启用 minlength 校验：
- ✅ 有效类型：
text、email、password、search、tel、url、textarea - ❌ 无效类型：
number、date、datetime-local、month、week、hidden、checkbox、file
给 type="number" 加 minlength="6" 是白写的——DOM 中属性存在，但浏览器既不报错也不校验。因为 minlength 检查的是字符串 UTF-16 长度，而 number 输入框的 value 可能是空字符串或 NaN，根本进不了长度判断逻辑。
minlength 必须搭配 required 才触发 “tooShort” 错误
单独写 minlength="5"，用户输 2 个字符后点提交，浏览器不会提示“太短”，而是优先报 valueMissing（空值错误）。这是因为 Constraint Validation API 的错误优先级固定为：空值 > 长度不足 > 格式错误。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 正确写法：
<input type="text" minlength="5" required> - ❌ 无效写法：
<input type="text" minlength="5">（留空或输少于 5 字都无 tooShort 提示） - ⚠️ 可选字段需最小长度？只能用 JS：
el.value.length < 5 && el.value !== ""判断后调用setCustomValidity()
原生 minlength 只在提交时检查，实时截断得靠 JS
minlength 不拦截粘贴、不阻止键盘输入、不自动删超长内容。用户可以粘贴 200 字再点提交，此时才弹提示。想做到“输第 5 个字就停”，必须监听 input 事件：
- 中文输入法下注意
event.isComposing，避免打断拼音组合 - 移动端 WebView（尤其旧版 iOS Safari）
input触发不稳定，建议同时监听compositionend - 动态修改
value后，记得手动触发input或change事件，否则checkValidity()返回结果滞后
例如 Vue 场景中，直接 v-model 更新数据后，DOM 的 validity 状态可能未同步，要用 this.$nextTick() 延迟检查。
后端必须重复校验，且不能依赖字符串 .length
前端所有限制都可被绕过：curl 提交、DevTools 修改 DOM、禁用 JS —— 都能让超短值抵达后端。
- Node.js 用
Buffer.byteLength(str, 'utf8')替代str.length，避免 emoji 或代理对（如 ??）计数错误 - Python 推荐
len(str.encode('utf-16-le')) // 2或使用unicodedata归一化后再算 - 不要假设前端传来的长度“可信”，哪怕它通过了
reportValidity()
真正容易被忽略的不是怎么写 minlength，而是忘记它只是一层薄薄的提示层——连输入拦截都做不到，更别说防恶意构造。
