minlength仅对text、email、password等文本类input生效，number和date类型会忽略；必须搭配required才触发校验；原生校验仅在提交时检查，实时限制需js监听input事件截断；后端必须重复校验。
minlength只对文本类input生效，number和date类型会忽略
给 type="number" 或 type="date" 加 minlength 是无效的。浏览器直接跳过该属性，既不报错也不校验——因为 minlength 检查的是字符串 UTF-16 长度，而数字输入框的 DOM 值可能是空字符串或 NaN，根本进不了长度校验逻辑。
常见错误：<input type="number" minlength="6"> 看似写了，用户输一个 1 也能提交成功。
- 有效类型：
text、email、password、search、tel、url和textarea - 无效类型：
number、date、datetime-local、month、week、hidden - 移动端注意：iOS Safari 10.3+ 才支持，旧版（如 iOS 9）静默降级，必须用 JS 回退
必须搭配required，否则空值不会触发tooShort校验
minlength 不是独立生效的约束。如果字段没加 required，用户留空时浏览器优先触发 valueMissing 错误；即使填了 2 个字符但 minlength="5"，也不会显示 “too short” 提示。
原因在于 Constraint Validation API 的错误优先级：空值 > 长度不足 > 格式错误。
- ✅ 正确写法：
<input type="text" minlength="5" required> - ❌ 无效写法：
<input type="text" minlength="5">（用户输 1 字或留空都不拦） - 若字段可选但仍有最小长度要求，得用 JS 监听
input事件手动判断el.value.length ，再调用 <code>setCustomValidity()
原生校验只在提交时触发，实时截断得靠JavaScript
minlength 不阻止粘贴、不拦截键盘输入、不自动删超长内容——它只在 form.submit() 或 el.reportValidity() 时检查当前值是否达标。用户完全可以粘贴 100 字再点提交，此时才弹提示。
想真正“不能输超过 5 个字”，必须监听 input 事件并主动截断：
const el = document.getElementById('limited');
el.addEventListener('input', () => {
if (el.value.length > 5) {
el.value = el.value.slice(0, 5);
}
});
- 用
input而非keydown：覆盖粘贴、拖拽、语音输入、IME 上屏等所有修改方式 - 用
slice(0, N)而非substring(0, N)：避免负索引异常 - 中文输入法下，
event.isComposing为true时暂不截断，防止打断拼音组词
后端必须重复校验，前端限制全是装饰
所有前端长度控制——无论是 minlength、maxlength 还是 JS 截断——都能被轻易绕过：禁用 JS、用 curl 提交、DevTools 改 DOM、抓包重放……只要后端没做校验，就等于没设防。
数据库字段定义（如 MySQL VARCHAR(16)）才是最终防线；服务端收到数据后，必须用语言原生方式重新计算长度（注意：JS 的 .length 对 emoji 或代理对可能出错，Python/Java 更可靠）。
最容易被忽略的一点：当 JS 截断后，如果用户没再触发 input 事件（比如粘贴后直接失焦），表单可能带着被截断的值提交，而后端若只依赖前端传来的“原始长度”字段，就会漏掉这个变化。所以后端永远以实际接收到的字符串为准，而不是信任任何前端传来的 length 数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
