minlength在react受控组件中不会绕过浏览器验证，但因react持续用value覆盖dom值，导致原生ui提示被压制；需配合required才能触发完整校验，此时form.checkvalidity()正确返回false。
minlength 在 React 受控组件中**不会绕过浏览器验证**，但它**不会触发原生 UI 提示（如红色边框、气泡），且 form.checkValidity() 仍能正确返回 false**——前提是元素同时具备 required 属性。
为什么 minlength 看起来“没反应”？
受控组件中，React 持续用 value 覆盖 DOM 的实际值，导致浏览器无法稳定读取输入内容长度。当用户输入未达 minlength 时：
- 浏览器内部校验逻辑仍在运行（
input.checkValidity()返回false） - 但原生错误 UI（如聚焦失焦后的红边、提交时的气泡）常被 React 的重渲染压制或延迟触发
- 若没加
required，空值时minlength不生效（HTML 规范：仅对非空值校验）
minlength + required 才真正起作用
单独写 minlength="5" 对空输入无效；必须配合 required，才能让浏览器在提交时将其纳入整体校验：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
<input type="text" value="{value}" onchange="{(e)"> setValue(e.target.value)}
minlength="5"
required
/>
-
form.checkValidity()在提交前调用会返回false（如果当前值长度 - 但用户可能看不到红边——这不是失效，而是视觉反馈被 React 更新节奏干扰
- 可手动调用
input.reportValidity()强制弹出原生提示（需 ref）
更可靠的做法：别只依赖 minlength
在受控场景下，minlength 的行为不稳定，尤其在 Safari 和旧版 Chrome 中兼容性差。建议：
- 用
pattern替代：pattern=".{5,}"+title="至少输入 5 个字符"，兼容性更好 - 提交时主动校验：
if (value.length - 若坚持用
minlength，务必加required，并用ref在提交时调用input.reportValidity()补全提示
真正容易被忽略的是：浏览器对 minlength 的支持依赖于元素是否“被认为已填写”，而受控组件中状态更新和 DOM 同步之间存在微小延迟——这会让校验时机错位，不是 bug，是机制使然。
