minlength 和 maxlength 可同时生效但行为不同：maxlength 强制截断输入，minlength 仅提交时校验；minlength 对 type="number" 无效，需改用 type="text" + inputmode + pattern 或 JS 控制；校验顺序为 required → minlength/maxlength。
minlength 和 maxlength 能否同时生效
能，但行为不一致：两者都只在表单提交时触发原生校验（reportValidity() 或 submit 事件），且 minlength 是 HTML5 新增属性，仅对 type="text"、"search"、"tel"、"url"、"email"、"password" 等文本类 input 有效；maxlength 则对所有文本类 input 都强制截断输入。
常见错误是以为 minlength="5" 会阻止用户输入少于 5 字符——它不会拦截输入，只在提交时提示“请至少输入 5 个字符”。
-
maxlength="10"会让用户根本输不满 11 字符（第 11 个键被忽略） -
minlength="5"允许用户输入 1 个字符，但提交时校验失败 - 若同时设
minlength="5" maxlength="10"，用户可自由输入 1–10 字符，仅提交时检查是否 ≥5
input type="number" 下 minlength 无效
minlength 对 type="number" 完全不起作用——浏览器会忽略该属性，控制台可能输出警告（如 Chrome 的 “The specified value ‘5’ is not a valid number” 类提示）。这是因为 minlength 是字符串长度校验，而 type="number" 的值是数字类型，内部不走字符串长度逻辑。
想限制数字位数（比如“最多 4 位整数”），必须换思路：
立即学习“前端免费学习笔记（深入）”；
- 改用
type="text"+inputmode="numeric"+pattern="\d{1,4}"（配合title提示） - 或用 JavaScript 监听
input事件，手动截断：if (e.target.value.length > 4) e.target.value = e.target.value.slice(0, 4) -
min/max属性管的是数值范围（如min="1000" max="9999"），不是字符串长度
与 required 搭配时的校验优先级
当 required、minlength、maxlength 同时存在，浏览器按固定顺序触发校验：先检查是否为空（required），再检查长度（minlength/maxlength）。空值会直接卡在 required 校验，根本不会走到 minlength。
这意味着：minlength="3" 不会阻止用户清空输入框；清空后点提交，报错是“请填写此字段”，不是“请至少输入 3 个字符”。
- 若需“非空且 ≥3”，
required+minlength="3"是正确组合 - 若仅要“≥3”，不要求非空（允许空字符串），则去掉
required，但需注意后端仍需二次校验空值 - 某些旧版 Safari 对
minlength支持不稳定，建议用 JS 补充checkValidity()调用
移动端软键盘适配问题
inputmode="text"（默认）下，iOS/Android 软键盘可能不匹配预期——比如设了 minlength="6" 的验证码输入框，用户希望调出数字键盘，但用了 type="text" 就弹出字母键盘。
解决方式不是靠 minlength，而是组合属性：
- 验证码场景：用
type="text" inputmode="numeric" pattern="\d*"，再靠 JS 控制长度（因为inputmode不影响校验，只影响键盘） -
pattern配合title可自定义错误提示，比原生minlength提示更友好 - Android Chrome 对
inputmode="decimal"支持较好，但 iOS 目前只认"numeric"和"decimal"，其他值回落为默认键盘
minlength 当成实时约束手段，或者在 type="number" 上硬加它。校验逻辑得拆清楚：前端拦截（JS）、前端提示（HTML 属性）、后端兜底（必做），三者缺一不可。 
