minlength 属性基于 utf-16 码元计数，无法准确校验中文、emoji等真实字符数；需用 grapheme-splitter 等库按字素簇计算字符数。
minlength 属性只校验 input 值的 UTF-16 码元长度，不是真实字符数
直接用 minlength 会出问题：中文、emoji、带组合符的字符（比如 ?? 或 “é”）可能被算作多个码元。例如 "??"（程序员 emoji）在 JavaScript 中 .length 是 4 或 5，但你只想限制“1 个字符”，这时 minlength="1" 完全失效。
根本原因是 minlength 底层调用的是 DOM 的 value.length，它基于 UTF-16 编码计数，不是 Unicode 字素簇（grapheme cluster）。
- ✅ 适合纯 ASCII 场景（如用户名、邮箱前缀）
- ❌ 不适合含 emoji、中文、越南文、阿拉伯文等多字节字符的输入
- ⚠️ 表单提交时浏览器原生校验仍走 UTF-16 长度，无法绕过
用 JavaScript 手动校验真实字符数（推荐 Grapheme Splitter）
要真正按“人眼看到的字符个数”校验，得用能识别字素簇的库。轻量且维护良好的是 grapheme-splitter：
npm install grapheme-splitter
校验逻辑示例：
import { GraphemeSplitter } from 'grapheme-splitter';<br>const splitter = new GraphemeSplitter();<br><br>function getGraphemeCount(str) {<br> return splitter.countGraphemes(str);<br>}<br><br>const input = document.querySelector('input[data-min-chars="2"]');<br>input.addEventListener('input', () => {<br> const count = getGraphemeCount(input.value);<br> if (count input.setCustomValidity('至少输入 2 个字符');<br> } else {<br> input.setCustomValidity('');<br> }<br>});
- 必须搭配
setCustomValidity()才能阻止表单提交 - 不要只靠
input事件，还得监听blur和submit，防止粘贴绕过 - 注意：该库不处理 surrogate pairs 的边界情况，但对绝大多数 emoji 和中文已足够可靠
服务端必须重复校验，前端只是体验优化
前端校验纯属友好提示，minlength 或 JS 校验都可被禁用或绕过。后端收到数据后，必须用对应语言的真实字符计数函数再校验一次：
- Node.js：
Array.from(value).length（ES2015+，支持字素簇） - Python：
len(list(grapheme.graphemes(value)))（需grapheme包） - Java：用
java.text.BreakIterator或 ICU4J - PHP：
grapheme_strlen($str)（需 intl 扩展）
如果后端没做这一步，前端再严谨也没用 —— 攻击者 curl 一下就绕过了所有前端逻辑。
要不要保留 minlength？视场景而定
可以留，但别依赖它做关键校验：
- 若业务明确只接受英文/数字（如密码强度规则中的“至少 8 位”），
minlength="8"安全可用 - 若输入框允许中文或 emoji，
minlength只作为 fallback，且值设得宽松些（比如预期 2 字符，设minlength="1"防空值） - Chrome/Firefox 对
minlength的错误提示文案不可定制，用户看到“请至少输入 X 个字符”却输不满，容易困惑
真实字符长度校验是个隐藏成本——它不像 required 那样开箱即用，得引入额外逻辑和后端适配。很多团队卡在这一步，最后退回到“只限制字节数”或“干脆不限”，其实是低估了字素簇的复杂性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
