minlength仅在表单提交或reportvalidity()时触发原生提示，无法拦截输入；需用input事件监听+setcustomvalidity手动控制校验，注意中文/emoji计数、type="number"/"tel"无效、框架中需手动刷新validity、后端必须独立校验。
minlength本身不支持自定义拦截
minlength 是纯校验属性，只在表单提交或调用 reportValidity() 时触发浏览器原生提示（如 “请至少输入 5 个字符”），它不会阻止输入、不截断内容、也不允许你接管弹窗样式或逻辑。想“字数不够就拦住”，必须绕过它，用 JS 主动控制。
用 input 事件实时判断 + setCustomValidity
核心思路：监听 input 事件，手动检查长度，用 setCustomValidity() 控制校验状态，避免依赖原生气泡。
- 监听
input（不是keydown），覆盖粘贴、拖拽、IME 上屏等所有修改方式 - 检查
el.value.length，注意：中文、emoji 都按 UTF-16 码元计数（一个 ?? 算 2） - 长度不足且非空时，调用
el.setCustomValidity('至少 6 位')；达标或为空时，用el.setCustomValidity('')清空错误 - 别在每次
input里调reportValidity()——会狂弹气泡，只靠 CSS 类或旁白文案反馈更稳妥
type="number" 或带格式的输入框不能用 minlength
minlength 对 type="number"、type="tel"（含分隔符如 138-1234-5678）完全无效。浏览器压根不读这个属性。
-
type="number"的值可能是NaN或空字符串，minlength校验逻辑直接跳过 -
type="tel"场景下，要清理非数字字符再算长度：el.value.replace(/\D/g, '').length >= 11 - 框架如 Vue/React 中，
v-model或value受控时，DOM 属性变化不自动同步 validity 状态，需this.$nextTick()或el.checkValidity()手动刷新
后端必须独立校验，且不能只用 .length
前端所有拦截都可被绕过：禁用 JS、curl 提交、DevTools 改 DOM —— minlength 和 JS 截断只是体验层。
- 后端校验必须存在，且不能只依赖
str.length - Node.js 推荐用
Buffer.byteLength(str, 'utf8')计字节数，防 emoji/代理对导致的越界 - 数据库字段限制（如
VARCHAR(20)）和安全边界（如 token 长度）必须由后端强制 enforce，不是“补充”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
