Vue3中如何全局设置Vuelidate内置验证器的自定义错误信息？

当然可以全局设置，不用每次重复调用helpers.withMessage，下面提供两种实用方案：

方案1：全局包装验证器并复用 #

创建一个专门的验证器工具文件，把常用的内置验证器预先用withMessage包装好，之后在组件里直接导入使用即可：

1. 创建工具文件（比如src/utils/validators.js）：

import { required, email, minLength, maxLength, helpers } from '@vuelidate/validators'

// 为每个内置验证器绑定全局错误消息
export const requiredField = helpers.withMessage('此字段不能为空', required)
export const validEmail = helpers.withMessage('请输入有效的邮箱地址', email)
export const minLengthField = (len) => helpers.withMessage(`最少需要输入${len}个字符`, minLength(len))
export const maxLengthField = (len) => helpers.withMessage(`最多只能输入${len}个字符`, maxLength(len))
// 按需添加其他验证器，比如 numeric、sameAs 等

2. 在组件中导入使用：

import { requiredField, validEmail, minLengthField } from '@/utils/validators'

const validations = {
  name: { requiredField },
  email: { validEmail },
  password: { minLengthField: minLengthField(6) }
}

方案2：用setLocale全局配置默认消息 #

这是更优雅的批量配置方式，直接给所有内置验证器设置全局默认错误消息：

1. 创建本地化消息文件（比如src/locales/validation.js）：

export default {
  required: '此字段不能为空',
  email: '请输入有效的邮箱地址',
  minLength: ({ min }) => `最少需要输入${min}个字符`,
  maxLength: ({ max }) => `最多只能输入${max}个字符`,
  numeric: '请输入数字',
  sameAs: ({ target }) => `此字段需与${target}保持一致`,
  // 其他内置验证器的消息按需添加
}

2. 在项目入口文件（比如main.js）中全局设置：

import { createApp } from 'vue'
import App from './App.vue'
import { setLocale } from '@vuelidate/validators'
import validationMessages from './locales/validation'

// 全局设置验证器错误消息
setLocale(validationMessages)

const app = createApp(App)
app.mount('#app')

3. 之后在组件中直接使用原生验证器，会自动应用全局消息：

import { required, email, minLength } from '@vuelidate/validators'

const validations = {
  name: { required },
  email: { email },
  password: { minLength: minLength(6) }
}

局部覆盖全局消息 #

如果某个组件需要自定义特殊的错误消息，仍然可以用helpers.withMessage覆盖全局配置：

import { required, helpers } from '@vuelidate/validators'

const validations = {
  username: {
    required: helpers.withMessage('用户名不能为空哦', required) // 此消息会优先于全局设置
  }
}

内容的提问来源于stack exchange，提问作者kenshin9