html原生maxlength和minlength可硬性限制文本输入长度，但需配合required才能生效，且minlength在ie中不支持，服务端必须二次校验。
用 maxlength 和 minlength 属性直接控制输入长度
HTML 原生就支持对 <input type="text"> 或 <textarea></textarea> 的字符数做硬性限制，无需 JavaScript。浏览器会自动截断超出 maxlength 的输入，并阻止提交时长度不足 minlength 的表单。
这两个属性只对文本类输入生效（text、search、url、tel、email、password、textarea），对 number 或 date 等类型无效——它们的“长度”不是字符概念。
-
maxlength是字符数（不是字节数），中文、英文、emoji 都算 1 个字符 -
minlength仅在表单提交时触发校验，不阻止用户清空输入框；若要实时反馈，需配合 CSS:invalid或 JS - 若同时设了
pattern，校验优先级为：先长度 → 再正则 → 最后其他约束（如required）
常见错误：为什么 minlength 像没起作用？
最常遇到的情况是：用户清空了输入框，但表单仍能提交——这是因为 minlength 默认不触发“空值校验”。当字段有 required 属性时，浏览器才把空字符串视作“未满足 minlength”，否则空值会被跳过。
所以必须配对使用：
<input type="text" minlength="3" required>
单独写 minlength="3" 而没有 required，等价于“如果填了，就得 ≥3 字符；如果不填，就忽略”。这和多数业务场景不符。
兼容性与边界注意点
maxlength 在所有现代浏览器中稳定支持（包括 IE10+）；minlength 在 IE 中完全不支持，Edge 14+、Chrome 44+、Firefox 40+ 才可用。若需兼容旧版 IE，必须用 JS 补充校验。
另外要注意：
-
textarea的maxlength计算的是换行符\n（Unix 风格），Windows 的\r\n会被当作 2 个字符 - 移动端软键盘可能绕过
maxlength（比如粘贴超长文本后光标卡在末尾，但实际已截断）；建议加 JS 监听input事件做二次清理 - 使用
inputmode="numeric"时，maxlength依然按字符计，不是数字位数
要不要用 JavaScript 做额外控制？
纯 HTML 属性足够应付大多数场景，但以下情况建议加 JS：
- 需要动态修改最大长度（比如根据下拉选择切换规则）→ 改
element.maxLength属性 - 想实时显示剩余字数 → 监听
input事件，读el.value.length - 防止粘贴超长内容 → 绑定
paste事件，用event.clipboardData.getData('text')截取前 N 位再插入 - 处理富文本编辑器或自定义输入组件 → HTML 属性失效，必须 JS 控制
别为了“看起来更稳”而默认加 JS 校验——它不能替代语义化 HTML，反而容易和原生行为冲突（比如重复截断、光标错位）。
真正容易被忽略的是：用户可能通过开发者工具删掉 maxlength 属性绕过限制。服务端永远要重新校验长度，前端限制只是体验优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
