minlength仅对type="text"、"search"、"url"、"tel"、"email"、"password"及生效；对number、date等无效，需js校验；仅在submit或调用checkvalidity()时触发，须与required配合使用。
minlength 属性不是万能的，它只对特定类型生效，且触发时机受限——直接加在 type="number" 或 type="date" 上等于没写。
哪些 input 类型支持 minlength？
仅以下类型真正识别并执行 minlength 校验：
-
type="text"、type="search"、type="url" -
type="tel"、type="email"、type="password" -
<textarea></textarea>（注意：不是input，但同样支持）
常见错误是给 <input type="number" minlength="3"> 加该属性——浏览器会完全忽略，不报错、不提示、不拦截。数字类输入的“最小位数”必须用 JS 判断字符串长度，或后端校验 value.toString().length。
minlength 什么时候才真正校验？
原生校验只在两个时机触发：
- 表单提交（
submit事件） - 手动调用
checkValidity()或reportValidity()
它不会监听 input 或 blur 实时反馈。用户输到第 2 个字符就停下，界面毫无变化；直到点击提交，才弹出“请填写此字段”这类默认提示。若字段还带 required，空值会被拦截；否则空字符串长度为 0，但不报错——所以 minlength 几乎总要和 required 搭配使用。
如何补足实时反馈和中文输入问题？
单纯依赖 minlength 体验差，尤其遇到粘贴、中文输入法组合状态时。推荐用 JS 做轻量增强：
const input = document.querySelector('input[minlength]');
input.addEventListener('input', () => {
const min = parseInt(input.getAttribute('minlength'));
const len = input.value.length;
// 注意：必须显式清空，否则错误状态会卡住
input.setCustomValidity(len
<p>但要注意两点：</p>
- 中文输入法未上屏时（如正在打“ni hao”），
input.value可能为空或不完整，容易误判——建议监听compositionend事件再校验 -
setCustomValidity('')必须每次调用，不能只在出错时设，否则通过后仍显示旧错误
为什么后端一定得重复校验？
前端 minlength 完全不可信：删掉 HTML 属性、禁用 JS、用 curl 直接 POST、甚至浏览器开发者工具改 DOM，都能绕过。后端必须用语言原生方式检查长度：
- Node.js：
if (req.body.phone?.length - Python Flask：
if len(request.form.get('name', ''))
特别提醒：服务端校验逻辑要和前端一致，比如是否算全角字符、是否 trim 空格——前后端对“长度”的定义不一致，上线后就会出数据异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
