Vue 3 中表单校验怎么限制输入框的最大最小长度-Vue.js-PHP中文网

vue 3 中限制输入框最大/最小长度应优先使用表单校验 rules 的 min/max（需 type: 'string'）或自定义 validator，而非 html maxlength；前者支持语义化提示与统一校验，后者可精确处理中文、全角字符等业务场景。

vue 3 中表单校验怎么限制输入框的最大最小长度

Vue 3 中限制输入框的**最大/最小长度**，主要通过表单校验规则（rules）结合 v-model 控制，而不是仅靠 HTML 的 maxlength 或 minlength（后者对中文、全角字符不准确，且不参与表单校验逻辑）。实际项目中推荐用 rules + validator 或内置 min/max 配置，兼顾提示、触发时机与语义化。

用 rules 内置 min/max 字段限制字符数

适用于纯英文、数字等单字节字符场景，简单直接：

min：最小字符数（按 JavaScript String.length 计，一个中文字符算 1 个）
max：最大字符数
需配合 type: 'string' 显式声明类型，否则校验可能跳过

示例（Ant Design Vue 3 或 Element Plus 风格）：

```js
rules: {
  title: [
    { type: 'string', required: true, message: '标题必填', trigger: 'blur' },
    { min: 2, max: 20, message: '标题长度需在 2–20 个字符之间', trigger: 'blur' }
  ]
}

自定义 validator 精确控制“中文长度”

中文、标点、全角字符在视觉和业务上常按“1 字”计，但 String.length 对 emoji、全角符号也计为 1，而用户感知长度可能不同。若需按“显示宽度”或“字数”校验（如“最多 20 个汉字”），应写自定义校验函数：

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

用正则 /[\u4e00-\u9fa5]/g 匹配中文字符，再结合其他规则（如允许空格、英文、数字）
返回 callback(true) 表示通过，callback(false) 或抛错表示失败
可同时检查内容合法性（如只允许中文）和长度

示例（限制“仅中文，2–20 字”）：

```js
title: [
  {
    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 校验，仅作辅助，防止用户误粘贴或绕过前端限制