html5 的 minlength 和 maxlength 属性用于限制文本输入的最小和最大字符数，适用于 input 和 textarea 元素；minlength 仅在提交或调用 checkvalidity() 时触发，需配合 javascript 才能在失焦时校验。

在 HTML5 中，minlength 和 maxlength 是原生表单属性，用于声明文本类输入字段的**最小和最大字符数限制**。它们作用于 <input type="text">、<input type="password">、<input type="search">、<input type="email">、<input type="tel"> 以及 <textarea></textarea> 元素，无需 JavaScript 即可启用基础验证。

直接设置 minlength 和 maxlength 属性

只需在标签中添加对应属性即可：

• maxlength="12"：用户最多能输入 12 个 UTF-16 码元（常见汉字、英文字母、数字均计为 1）；超出部分在键盘输入时会被浏览器静默截断（但粘贴仍可能绕过）
• minlength="6"：提交表单时校验，若实际字符数少于 6，会触发浏览器默认提示（如“请至少输入 6 个字符”）
• 两者可共存：<input type="text" minlength="6" maxlength="12">

注意 minlength 的触发条件

minlength 不会在用户输入过程中实时反馈，只在表单提交或调用 checkValidity() 时生效。若同时设了 required，空值会优先报 required 错误，而非 minlength。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 例如：<input required minlength="3">，用户未输入就提交，提示的是“请填写此字段”，不是 minlength 提示
• 要让 minlength 在聚焦离开时也校验，需配合 JavaScript 手动调用 reportValidity()

textarea 同样支持长度限制

<textarea></textarea> 支持完全相同的 minlength / maxlength 用法，且对换行符（\n）也按 1 个字符计数：

• <textarea maxlength="200" minlength="10"></textarea>
• 适合评论、反馈等需要控制内容长短的多行场景

配合 pattern 实现更精准的约束

当既要控长度、又要控格式（比如必须是字母数字、不能含空格），可结合 pattern 使用正则：

• <input pattern="^[a-zA-Z0-9]{8,16}$" maxlength="16" title="请输入8–16位字母或数字">
• 注意：pattern 校验的是整个字符串是否匹配，不自动限制长度，所以仍需显式写 maxlength
• title 属性用于自定义错误提示文案，提升可访问性