minlength 属性比正则更直接高效，语义清晰、原生支持、无障碍友好且触发表单验证UI；需搭配 required 使用，Safari 10.1+ 才完全支持；纯长度校验应优先用 minlength，pattern 仅适用于需同时约束格式与长度的场景。
HTML input 的 minlength 属性比正则更直接
不需要正则就能限制最小长度——minlength 是 HTML5 原生属性，语义清晰、浏览器原生支持、无障碍友好，且会触发表单验证 UI（比如红色边框 + checkValidity() 返回 false）。
常见错误是误以为必须用 pattern 配合正则，结果写错量词或忽略全局匹配行为，反而让校验失效。
-
minlength="6"：纯长度校验，不关心字符类型，空格也算 - 搭配
required使用才真正生效（否则空值跳过长度检查） - 注意：Safari 10.1+ 才完全支持
minlength，老版本需降级用 JS 或pattern
pattern 中怎么写「至少 N 个字符」的正则
如果必须用 pattern（比如要同时约束格式和长度），正则必须锚定首尾，否则部分匹配就通过。最简写法是：^.{6,}$。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 漏掉
^和$：比如.{6,}会匹配"a123456b"（中间 6 个字符就满足），实际不达标 - 没考虑换行符：
.默认不匹配\n，但<input>单行输入天然不含换行，可忽略 - 中文/emoji 算 1 个字符：现代浏览器中
.{6,}对 UTF-16 代理对（如某些 emoji）也按 1 个字符计，无需额外处理
示例：
<input type="text" pattern="^.{8,}$" title="至少 8 个字符">
为什么不用 pattern 校验纯长度是个坏主意
pattern 本质是格式校验，不是长度校验。它的设计目标是「匹配某种模式」，而非「统计字符数」。混用会导致：
- 可读性差：别人看到
^.{6,}$要反应一下才懂是长度限制 - 无法与语义化属性联动：比如
minlength能被屏幕阅读器识别，pattern的title提示却常被忽略或截断 - 移动端键盘行为异常：部分 Android 键盘根据
type和原生属性优化弹出类型，pattern不影响键盘，但可能掩盖真实需求（比如该用type="password"却只靠正则防短密码）
真需要动态长度或复杂逻辑时，JS 是唯一可靠选择
当最小长度依赖其他字段（如「密码长度 ≥ 用户名长度 + 2」）或实时反馈要求高（如字数计数器 + 禁用提交按钮），HTML 属性无能为力，必须用 JS。
关键点：
- 监听
input事件，别用change（后者延迟触发） - 用
element.value.length获取真实字符数，比正则快且稳定 - 手动调用
setCustomValidity()控制验证状态，例如：input.addEventListener('input', () => {<br> if (input.value.length < 6) {<br> input.setCustomValidity('至少 6 个字符');<br> } else {<br> input.setCustomValidity('');<br> }<br>});
注意：JS 校验只是增强体验，后端永远要重新验证——前端控制台可以轻易绕过所有 HTML 和 JS 校验。
