maxlength仅限制输入，不触发校验逻辑；它纯属前端体验优化，无法阻止粘贴、devtools修改或脚本绕过，不产生invalid事件、不改变valid状态、不阻断提交，后端必须独立校验。
maxlength 属性只限制输入，不触发校验逻辑
HTML 的 maxlength 是纯前端限制，用户无法手动输入超长内容，但可通过粘贴、开发者工具修改 DOM 或脚本绕过。它不产生任何校验事件（比如 invalid），也不会自动添加 valid/invalid CSS 状态，更不会阻止表单提交——除非配合 required 和浏览器默认行为。
常见错误现象：maxlength="10" 的输入框粘贴进 15 个字符后只显示前 10 个，但用户没收到任何提示；表单仍可提交，后端才发现超长。
- 仅用于体验优化，不能替代校验
- 对
<textarea></textarea>和<input type="text|email|search|tel|url|password">有效，type="number"等无效 - IE9+ 支持，无兼容性问题，但 Safari 在某些版本中对粘贴截断有延迟
用 checkValidity() + 事件监听做主动校验
真正可控的长度校验要靠 JavaScript 主动触发，核心是监听 input（含粘贴）和 blur，再调用 checkValidity() 并处理反馈。
示例逻辑：
<input type="text" id="username" maxlength="20"><span class="error" id="username-error"></span>
对应 JS：
const el = document.getElementById('username');
const errorEl = document.getElementById('username-error');
function validateLength() {
const max = el.maxLength;
if (el.value.length > max) {
el.setCustomValidity(`最多 ${max} 个字符`);
errorEl.textContent = `最多 ${max} 个字符`;
} else {
el.setCustomValidity('');
errorEl.textContent = '';
}
}
el.addEventListener('input', validateLength);
el.addEventListener('blur', validateLength);
-
setCustomValidity('')是关键：清空才能让元素回归 valid 状态 - 必须监听
input，而非change（后者不触发粘贴/拖入） - 搭配
:invalidCSS 可视觉反馈：input:invalid { border-color: #e53e3e; }
服务端必须重复校验 length
前端校验只是便利手段，攻击者可完全跳过 HTML/JS。Node.js、Python、PHP 等后端收到请求后，必须独立检查字段长度，且规则需与前端一致（比如都按 UTF-16 码元计数，而非字节数）。
容易踩的坑：
- JavaScript 中
'??'.length === 2（emoji 组合字符占多个码元），但某些后端语言默认按字节或 Unicode 字符计数，导致前后端判断不一致 - 数据库字段长度（如 MySQL
VARCHAR(50)）是字节数，UTF8mb4 下一个 emoji 占 4 字节，50 字节 ≈ 12–13 个 emoji，远少于前端显示的 “50 个字符” - 不要信任
maxlength值做服务端逻辑，应硬编码或从配置读取统一最大值
用 Constraint Validation API 替代手写逻辑
现代浏览器支持完整的约束验证 API，比手动 setCustomValidity 更健壮，尤其适合多规则场景（如同时校验长度 + 格式）。
关键点：
- 给 input 添加
pattern或minlength后，checkValidity()会一并检查 - 用
el.validationMessage取当前错误文案，避免自己拼接 - 表单提交时自动触发验证，
submit事件可被event.preventDefault()拦截 - 注意：Safari 对
minlength的validationMessage支持较晚（iOS 16.4+/macOS 13.3+），旧版需降级处理
复杂点在于字符计数模型——浏览器始终按 JavaScript 的 .length（UTF-16 码元）算，而业务语义常要求“可见字符数”或“汉字计 2 英文计 1”，这种必须自定义校验函数，无法靠原生属性解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
