minlength仅对text、search、url、tel、email、password和textarea类型有效，对number、date、checkbox等无效；校验仅在submit或checkvalidity()时触发，需配合required使用，且服务端必须重复校验。
minlength 属性在哪些 input 类型上真正生效
minlength 只对 type="text"、type="search"、type="url"、type="tel"、type="email"、type="password" 和 type="textarea" 有效。对 type="number"、type="date"、type="checkbox" 等完全无效——浏览器会忽略它，也不触发校验。
常见错误是给 <input type="number" minlength="3"> 加这个属性，结果表单提交时毫无反应。数字输入框的长度约束得靠 JS 或后端判断，minlength 在这里只是摆设。
浏览器原生校验触发时机与限制
原生 minlength 校验只在表单提交（submit）或调用 checkValidity() 时触发，不会实时监听输入。用户输到第 2 个字符就停下，也不会立刻标红或提示。
- 必须配合
required才能确保空值也被拦截（否则空字符串长度为 0，但不满足required才报错） - Chrome 和 Edge 支持良好；Firefox 从 v57+ 开始支持；Safari 直到 v16.4 才完整支持
minlength（旧版 Safari 会静默忽略） - 移动端软键盘提交按钮点击时，部分 Android 浏览器可能不触发校验，需额外监听
blur或input
和 JavaScript 的 minLength 校验如何协同
单纯依赖 minlength 不够鲁棒，尤其要处理粘贴、拖入文本、全角字符等场景。建议用 JS 补充实时反馈：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const input = document.querySelector('input[minlength]');
input.addEventListener('input', () => {
const min = parseInt(input.getAttribute('minlength'));
const len = input.value.length;
input.setCustomValidity(len
<p>注意：<code>setCustomValidity('')</code> 必须显式调用清空错误，否则一旦设过非空字符串，后续即使满足条件也不会自动恢复通过状态。</p>
<p>另外，中文输入法组合过程中（如“你好”还没上屏），<code>input.value</code> 可能暂为空或不完整，此时校验易误报，可加 <code>setTimeout</code> 防抖或监听 <code>compositionend</code> 事件。</p>
<h3>服务端仍必须重复校验的原因</h3>
<p>前端 <code>minlength</code> 完全可被绕过：禁用 JS、删掉 HTML 属性、用 curl 提交、甚至直接改 DOM。所以后端收到数据后，仍需用语言原生方式检查长度：</p>
- Node.js：
if (req.body.username?.length - Python（Flask）：
if len(request.form.get('username', '')) - PHP：
if (mb_strlen($_POST['username'] ?? '', 'UTF-8') （注意用 <code>mb_strlen避免中文乱码计数）
特别提醒：minlength 计的是 Unicode 码点长度（String.prototype.length），不是字节数，也不是视觉字符数。比如 emoji ?? 长度为 2，某些组合 emoji 可能更长，后端若用简单 strlen 会出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
