HTML中长度校验应优先使用minlength和maxlength属性，而非pattern正则；因后者无法准确处理空格、换行、Unicode字符及提示不明确，且服务端必须重新校验。
HTML 本身不支持正则表达式校验长度——pattern 属性只做格式匹配，不直接限制字符数；真正控制长度靠的是 minlength 和 maxlength。
为什么不能用正则写“长度校验”
有人试图写 pattern=". {5,10}" 来表示 5–10 个字符，但问题很多：
- 空格会被当作字面量匹配，实际想匹配任意字符得用
.+或[\s\S] -
.默认不匹配换行符，多行输入时失效 - 正则无法区分字节、Unicode 字符、显示宽度（比如 emoji 占 2 个码位）
- 浏览器对
pattern的错误提示固定为“请匹配指定格式”，用户不知道是“太短”还是“含非法字符”
minlength 和 maxlength 是更直接的选择
它们专为长度设计，语义清晰、兼容性好（Chrome 10+、Firefox 4+、Safari 10.1+）、报错提示也明确（如“必须至少输入 6 个字符”）：
<input type="text" minlength="6" maxlength="20" required>
-
minlength对空格敏感：输入纯空格会触发验证失败（符合预期） -
maxlength在输入法组合过程中可能临时超长，但最终提交前会被截断或阻止（行为因浏览器而异） - 与
required配合时，空值 +minlength会同时触发两个错误，建议只留一个逻辑主控
真要用正则配合长度，得加锚点和正确字符集
如果业务强依赖正则（比如只允许字母数字且限定长度），必须显式锚定并选对模式：
<input pattern="[a-zA-Z0-9]{6,20}" title="请输入6–20位字母或数字">
- 必须用
^和$锚点（HTMLpattern自动隐式添加，不用手写） - 避免用
.，改用明确字符类，比如[\s\S]匹配所有 Unicode 字符（含换行），但注意 Safari 对\s支持不一致 -
{n,m}量词才真正按字符数计，比.*可靠得多 -
title属性能覆盖默认提示，但仅在悬停时显示，移动端基本不可见
最易被忽略的一点：服务端永远要重新校验长度。前端的 maxlength 可被绕过（禁用 JS、手动修改 DOM、curl 提交），正则更是纯客户端逻辑。别让「看着校验了」变成安全假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
