HTML表单属性Maxlength与Minlength的校验逻辑与边界处理

maxlength/minlength是浏览器原生输入限制而非校验机制：maxlength按Unicode码点截断输入且不触发验证，minlength仅在提交或调用验证API时生效，二者均需配合required或验证API才能阻断提交，且属性值必须为纯整数字符串。

maxlength 和 minlength 是浏览器原生的字符数限制机制，不是“校验”而是“截断+阻止”，不触发表单提交失败，只控制输入行为；真正触发校验失败（如 reportValidity() 报错、提交阻断）需配合 required 或显式调用验证 API。

maxlength 实际生效时会阻止输入，但不等于“校验通过”

当用户在 <input type="text" maxlength="10"> 中已输入 10 个字符，第 11 次按键（含中文、空格、emoji）会被浏览器直接忽略——这是 UI 层拦截，不是 DOM 事件或 JS 可捕获的“输入”。

• 中文、英文、标点、空格、emoji（如 ??）都按 1 个 Unicode 码点计数；但某些组合 emoji（如 ?‍?）可能占多个码点，maxlength 仍按码点数截断，导致显示异常
• 移动端输入法在“组词未确认”阶段可能临时超出限制，但确认后自动截断，DOM 中的 value 始终 ≤ maxlength
• maxlength 对 type="number"、type="checkbox"、type="file" 无效，设了也不起作用
• 若 JS 手动赋值超长字符串（如 el.value = "a".repeat(20)），浏览器不会自动截断，需开发者自己处理

minlength 只在表单提交或调用验证时起作用

minlength 不阻止用户删除内容，它只在 checkValidity()、reportValidity() 或原生 submit 触发时参与判断。例如：<input type="text" minlength="5"> 允许用户输 0 个字符，但点击提交时会报错。

• 必须搭配 required 才能避免“空值绕过”：否则用户留空也能通过 minlength 检查（因空字符串长度为 0，小于 5，但 required 缺失时不算违例）
• 单独使用 minlength 时，el.validity.tooShort 为 true 仅当 value.length < minlength 且 value 非空；若为空，则由 valueMissing 控制
• textarea 同样适用，但要注意换行符 n 算 1 个字符，Windows 的 rn 算 2 个

边界场景下 length 计算与后端不一致的风险

前端用 String.prototype.length 计算，后端若用字节长度（如 UTF-8 编码下中文占 3 字节）、或按图形单元（grapheme cluster）统计（如处理 ?‍?），结果可能不同。

立即学习“前端免费学习笔记（深入）”；

• 常见坑：用户粘贴一段含 emoji 的文本，前端显示“已满 10 字”，后端入库时发现实际存储了 12 字节或 11 个码点，触发数据库字段溢出
• 解决方案不是禁用 maxlength，而是前后端约定统一按 Unicode 码点计数，并在后端做二次截断（如 Python 用 text[:10]，而非 text.encode()[:10]）
• 若业务要求“严格 10 字符且兼容所有 emoji”，建议用 Intl.Segmenter（现代环境）或 grapheme-splitter 库做图形单元计数，再替换原生 maxlength

最易被忽略的一点：maxlength 和 minlength 的值是字符串，不是数字；写成 maxlength="010" 或 maxlength="10.5" 会导致解析失败，浏览器降级为无限制——务必确保属性值是纯整数字符串。