maxlength属性可限制单行输入长度，但仅防用户输入与粘贴，无法阻止JS赋值，后端必须校验；pattern配合title实现格式+长度组合验证；JS需监听input事件实时处理；所有前端限制均可被绕过，服务端校验不可或缺。
用 maxlength 属性限制单行文本输入长度
对 <input type="text"> 或 <input type="email"> 这类单行输入，直接加 maxlength 是最简单有效的方式。浏览器会阻止用户输入超过该值的字符，且提交时不会发送超长内容。
注意：它只作用于用户键盘输入和粘贴（现代浏览器基本都拦截超长粘贴），但无法防止 JS 动态赋值绕过——所以后端仍需校验。
示例：
<input type="text" name="username" maxlength="16" required>
-
maxlength值为数字，单位是 Unicode 码点个数（不是字节数，中文、emoji 通常各占 1） - 设为
0无效；不写该属性则无限制 - 对
<textarea></textarea>同样适用，但要注意换行符也计入长度
用 pattern 配合 title 实现更灵活的长度+格式约束
当需要“至少 6 位且不超过 20 位字母数字”这类组合规则时，maxlength 单独不够用。pattern 可以定义正则，配合 title 提供友好的报错提示。
立即学习“前端免费学习笔记（深入）”；
示例（密码字段）：
<input type="password" name="pwd" pattern="[a-zA-Z0-9]{6,20}" title="请输入6–20位字母或数字" required>
- 正则
[a-zA-Z0-9]{6,20}表示严格限定长度范围，且排除空格、符号 - 用户提交时若不匹配，Chrome/Firefox 会弹出
title文本，Safari 需额外 JS 支持提示 -
pattern不会实时拦截输入，只在表单提交或调用checkValidity()时触发验证
用 JavaScript 监听 input 事件做实时截断或提示
如果设计上要求“输入到上限时自动截断”或“显示剩余字数”，就得靠 JS。注意别只监听 keydown，它捕获不到粘贴、拖入、语音输入等操作。
推荐监听 input 事件，并在回调中处理：
const el = document.querySelector('input[name="bio"]');<br>el.addEventListener('input', () => {<br> if (el.value.length > 100) {<br> el.value = el.value.slice(0, 100);<br> }<br>});
- 直接修改
el.value会触发新的input事件，需避免无限循环（上面例子因赋值后长度已固定，不会再次触发） - 对
<textarea></textarea>同样适用，但要注意换行符在不同系统下是\r\n还是\n，.length计算一致 - 移动端软键盘可能延迟触发
input，可加setTimeout防抖确保最终状态
服务端必须二次校验，前端限制只是体验层
所有前端长度限制都可被禁用 DevTools、curl、Postman 绕过。比如删掉 maxlength 属性，或用 JS 赋值超长字符串，再调用 form.submit()，照样能发出去。
所以关键逻辑必须落在后端：
- 接收参数后立刻检查长度，超出则返回 400 或对应错误码
- 数据库字段长度要与业务限制对齐（例如设了
maxlength="32"，但 DB 是VARCHAR(255)没问题；若设成VARCHAR(16)却允许前端传 32，则必然截断或报错） - 不要依赖
HTMLFormElement.checkValidity()的返回值做权限判断——它只反映表单控件原生约束，不包含业务规则
最容易被忽略的是 emoji 和代理对（surrogate pairs）：JavaScript 中 "??".length === 2，但很多后端语言（如 Python 默认）按 UTF-8 字节算，一个 emoji 可能占 4 字节。长度校验前务必统一编码粒度。
