minlength 属性仅在表单提交或调用 reportvalidity() 时，对带 required 的文本类 input 和 textarea 生效；若缺失 required、type 不匹配（如 number/date）、未提交、输入法未上屏或移动端兼容问题，均不触发校验，且后端必须独立验证。
minlength 属性只在提交时校验长度下限，且必须和 required 一起用、仅对文本类 input 和 textarea 生效；单独写或用在 type="number" 上等于没写。
为什么写了 minlength="6" 却不报错？
浏览器原生校验根本没触发——它只在表单提交（或调用 reportValidity()）时检查带 required 的字段。如果没加 required，用户留空或输 2 个字，校验直接跳过。
-
required缺失：校验逻辑不启动，minlength形同虚设 -
type不匹配：比如type="number"、type="date"、type="color"完全无视minlength，因为它们的value不是纯字符串 - 用户未提交：输入过程中不会拦截，也不会高亮/变红，只有提交那一刻才反馈
minlength 在 type="tel" 或带格式化组件里为啥失效？
这类输入框常自动插入分隔符（如 138-1234-5678），但 minlength 数的是 DOM 中的完整字符串长度，不是清理后的数字位数。用户看着输了 11 位，实际值可能是 "138-1234-5678"（14 字符），minlength="11" 就永远满足不了。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- JS 回填或框架控制（如 React 的
value+onChange）可能绕过原生属性，需显式透传minLength（驼峰）和required - 移动端 iOS Safari 10.3 之前版本静默忽略
minlength，老设备用户无任何提示 - 中文输入法下，拼音串未上屏时不计入长度，但用户可能误以为已输入达标
怎么补 JS 实时校验并避免弹窗轰炸？
别等提交再拦，也别每次 input 都调 reportValidity()——那会每敲一个键就弹气泡。重点是实时反馈状态，而非强制中断。
- 监听
input事件，用el.value.replace(/\D/g, '').length算真实数字位（tel场景） - 用
el.setCustomValidity("")清空错误，再根据条件设新提示，避免残留 - 优先改 CSS 类（如
is-invalid）+ 更新旁白文案（如<div class="invalid-feedback">至少 11 位</div>），不依赖气泡 - 对
type="number"，改用min/max+ JS 拦截粘贴和键盘输入，minlength根本不该出现在那儿
真正容易被忽略的点：所有前端长度限制都只是体验层。用户禁用 JS、用 curl 提交、手动改 DOM，都能绕过 minlength 和任何 JS 校验。后端必须独立验证字符数（注意中文、emoji、零宽字符的编码差异），并截断或拒绝超长输入——这不是“补充”，而是唯一可信防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
