Vuelidate结合vue-i18n（英/波斯语）验证问题求助

我尝试按照Vuelidate的i18n支持文档实现集成，但遇到了无法获取t、t.bind和i18n的问题，同时验证规则无法识别和验证波斯语（法尔斯语）字符，需要实现对波斯语和英语字段的双重验证。

版本信息 #

• "@vuelidate/core": "^2.0.3"
• "@vuelidate/validators": "^2.0.4"
• "vue-i18n": "^9.11.0"

我的代码 #

i18n.js #

import { createI18n } from 'vue-i18n'
import en from '@/locales/en.json'
import fa from '@/locales/fa.json'

function loadLocaleMessages() {
  const locales = [{ en: en }, { fa: fa }]
  const messages = {}
  locales.forEach((lang) => {
    const key = Object.keys(lang)
    messages[key] = lang[key]
  })
  return messages
}

export default createI18n({
  locale: 'en',
  fallbackLocale: 'fa',
  messages: loadLocaleMessages()
})

validation.js（存在集成问题） #

import * as validators from '@vuelidate/validators'
import { i18n } from "@/i18n"

const { createI18nMessage } = validators

const withI18nMessage = createI18nMessage({ t: i18n.global.t.bind(i18n) })

export const required = withI18nMessage(validators.required)

export const minLength = withI18nMessage(validators.minLength, { withArguments: true })
export const maxLength = withI18nMessage(validators.maxLength(10))

解决方案 #

1. 修复Vuelidate与vue-i18n集成问题 #

你的validation.js存在两个核心问题：导入方式错误、maxLength定义格式错误，修改如下：

// validation.js
import * as validators from '@vuelidate/validators'
import i18n from "@/i18n" // 改为默认导入，对应i18n.js的默认导出

const { createI18nMessage } = validators

// 直接传入i18n全局t函数即可，无需额外bind
const withI18nMessage = createI18nMessage({ t: i18n.global.t })

export const required = withI18nMessage(validators.required)

// minLength保持原有写法，maxLength需调整为先传递验证器，再在组件中传参数
export const minLength = withI18nMessage(validators.minLength, { withArguments: true })
export const maxLength = withI18nMessage(validators.maxLength, { withArguments: true })

组件中使用示例

import { useVuelidate } from '@vuelidate/core'
import { required, minLength, maxLength } from './validation'

export default {
  setup() {
    return {
      v$: useVuelidate(),
      form: {
        username: ''
      }
    }
  },
  validations() {
    return {
      form: {
        username: {
          required,
          minLength: minLength(3),
          maxLength: maxLength(10)
        }
      }
    }
  }
}

补充语言包配置

确保en.json和fa.json包含验证提示信息：

• en.json

{
  "validations": {
    "required": "This field is required",
    "minLength": "Minimum length is {min}",
    "maxLength": "Maximum length is {max}"
  }
}

• fa.json

{
  "validations": {
    "required": "این فیلد الزامی است",
    "minLength": "حداقل طول {min} کاراکتر است",
    "maxLength": "حداکثر طول {max} کاراکتر است"
  }
}

2. 实现波斯语字符验证 #

如果需要验证输入是否为纯波斯语字符，可自定义验证器：

// validation.js 新增内容
const { createValidator } = validators

// 自定义波斯语字符验证规则，匹配Unicode波斯语字符范围
const isPersian = createValidator(value => {
  if (!value) return true // 允许空值，需配合required验证器使用
  return /^[\u0600-\u06FF\s]+$/.test(value)
}, 'validations.isPersian')

// 包装成带i18n提示的验证器
export const isPersian = withI18nMessage(isPersian)

补充语言包提示

• en.json添加：

"isPersian": "Only Persian characters are allowed"

• fa.json添加：

"isPersian": "فقط کاراکترهای فارسی مجاز است"

组件中使用波斯语验证

validations() {
  return {
    form: {
      persianFullName: {
        required,
        isPersian,
        minLength: minLength(2)
      },
      englishUsername: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(20)
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者m.ma