Vue 3 中限制输入框最大/最小长度应优先使用表单校验 rules 的 min/max（需 type: 'string'）或自定义 validator，而非 HTML maxlength；前者支持语义化提示与统一校验，后者可精确处理中文、全角字符等业务场景。
Vue 3 中限制输入框的**最大/最小长度**，主要通过表单校验规则（rules）结合 v-model 控制，而不是仅靠 HTML 的 maxlength 或 minlength（后者对中文、全角字符不准确，且不参与表单校验逻辑）。实际项目中推荐用 rules + validator 或内置 min/max 配置，兼顾提示、触发时机与语义化。
用 rules 内置 min/max 字段限制字符数
适用于纯英文、数字等单字节字符场景，简单直接：
-
min：最小字符数（按 JavaScriptString.length计，一个中文字符算 1 个） -
max：最大字符数 - 需配合
type: 'string'显式声明类型，否则校验可能跳过
示例（Ant Design Vue 3 或 Element Plus 风格）：
```jsrules: {
title: [
{ type: 'string', required: true, message: '标题必填', trigger: 'blur' },
{ min: 2, max: 20, message: '标题长度需在 2–20 个字符之间', trigger: 'blur' }
]
}
自定义 validator 精确控制“中文长度”
中文、标点、全角字符在视觉和业务上常按“1 字”计，但 String.length 对 emoji、全角符号也计为 1，而用户感知长度可能不同。若需按“显示宽度”或“字数”校验（如“最多 20 个汉字”），应写自定义校验函数：
立即学习“前端免费学习笔记（深入）”；
- 用正则
/[\u4e00-\u9fa5]/g匹配中文字符，再结合其他规则（如允许空格、英文、数字） - 返回
callback(true)表示通过，callback(false)或抛错表示失败 - 可同时检查内容合法性（如只允许中文）和长度
示例（限制“仅中文，2–20 字”）：
```jstitle: [
{
validator: (rule, value, callback) => {
if (!value || value.trim() === '') {
return callback(new Error('标题不能为空'));
}
const cnCount = (value.match(/[\u4e00-\u9fa5]/g) || []).length;
if (cnCount 20) {
return callback(new Error('标题须为 2–20 个中文字符'));
}
if (!/^[\u4e00-\u9fa5\s]*$/.test(value)) {
return callback(new Error('标题只能包含中文和空格'));
}
callback();
},
trigger: 'blur'
}
]
配合 UI 层做实时输入拦截（非校验，但提升体验）
rules 是校验层，不阻止输入；若需实时截断超长内容或过滤非法字符，需额外处理：
- 用
@input或v-model+ 计算属性截断：如v-model="limitedTitle"，然后在computed中返回value.slice(0, 20) - 监听
input事件 + 正则替换：例如onInput: (e) => { e.target.value = e.target.value.replace(/[^\u4e00-\u9fa5]/g, '').slice(0, 20) } - 注意：这类操作不能替代 rules 校验，仅作辅助，防止用户误粘贴或绕过前端限制
注意 maxlength 的局限性
HTML 原生 maxlength="20" 在 Vue 中可用，但它：
- 按 UTF-16 编码单位计数，对 emoji（如 ??）可能计为 2，导致显示长度不准
- 不触发表单
validate，也不显示 rules 提示信息 - 无法区分中英文混合时的“视觉长度”，纯前端展示建议仍以
rules为准
