Vue.js vee-validate 自定义字典设置

Question

目前，我正在使用 vue-validate 处理验证消息本地化(3 种语言) 在每个表单组件中(contactForm, registrationForm, ...)

即联系表格

ContactForm.vue

<script>
...
import English from 'vee-validate/dist/locale/en'
import French from 'vee-validate/dist/locale/fr'
import Portuguese from 'vee-validate/dist/locale/pt_BR'
...
import { Validator } from 'vee-validate'
...

// LOCALIZATION
const dict = {
  en: { custom: { honorificPrefix: { mrs: 'Mrs', mr: 'Mr' } } },
  br: { custom: { honorificPrefix: { mrs: 'Sra', mr: 'Sr' } } },
  fr: { custom: { honorificPrefix: { mrs: 'Mme', mr: 'Mr' } } }
}
Validator.localize('en', dict.en)
Validator.localize('br', dict.br)
Validator.localize('fr', dict.fr)

export default {
  name: 'contactForm',
  $_veeValidate: { validator: 'new' },
  data () {
    return {
    ...
    }
  },
  computed: {
    ...mapGetters(['language']),
    ...
  },
  methods: {
    ...
    submit: function () {
      ...
    },
    clear: function () {
     ...
    }
  },
  mounted () {
    this.$validator.localize('en', {
      messages: English.messages,
      attributes: {
        email: 'Email Address',
        givenName: 'First Nama',
        familyName: 'Name',
        messageContent: 'Message'
        //  other custom attributes
      },
      custom: {
        message: () => 'Message cannot be empty',
        select: 'Select field is required',
        correct_all: 'Please correct all errors in your form',
        error: 'Error',
        axiosPostError: 'Oops! An error occured and your message could not be sent.',
        success: 'Thanks',
        contactMsgSent: 'Your message has been successfully sent. We\'ll be in touch soon.'
      }
    })
    this.$validator.localize('fr', {
      messages: French.messages,
      attributes: {
        email: 'Adresse courriel',
        name: 'Nom',
        messageContent: 'Message'
        // autres attributs spécifiques
      },
      custom: {
        message: () => 'Vous n\'avez pas fourni de message',
        select: 'Vous devez sélectionner une option',
        correct_all: 'Veuillez corriger toutes les erreurs dans votre formulaire',
        error: 'Erreur',
        axiosPostError: 'Oops! Une erreur est survenue et votre message n\'a pas pu être envoyé',
        success: 'Merci',
        contactMsgSent: 'Votre message a été envoyé avec succès. Nous entrerons bientôt en contact avec vous.'
      }
    })
    this.$validator.localize('br', {
      messages: Portuguese.messages,
      attributes: {
        email: 'Endereço de e-mail',
        name: 'Nome',
        messageContent: 'Messagem'
        // outros atributos personalizados
      },
      custom: {
        message: () => 'Messagem cnão pode estar vazio',
        select: 'Selecione campo é obrigatório',
        correct_all: 'Por favor, corrija todos os erros em seu formulário',
        error: 'Erro',
        axiosPostError: 'Opa! Ocorreu um erro e sua mensagem não pôde ser enviada.',
        success: 'Obrigado',
        contactMsgSent: 'Sua mensagem foi enviada com sucesso. Nós entraremos em contato em breve.'
      }
    })
    // start with current locale locale.
    this.$validator.localize(this.language)
  }
}
</script>

因为我必须为其他表单重复相同的设置(添加其他自定义属性和消息)，我想知道将所有这些东西移动到一个共享的 js 文件中并在每个表单中都需要它是否更好？我想集中设置字典应该更好，但我不确定..而且我不确定是否正确

然后我会有这样的东西:

ContactForm.vue(已更改)

<script>
...

import appValidationDictionarySetup from 'appValidationDictionary.js'

export default {
  name: 'contactForm',
  $_veeValidate: { validator: 'new' },
  data () {
    return {
    ...
    }
  },
  computed: {
    ...mapGetters(['language']),
    ...
  },
  methods: {
    ...
    submit: function () {
      ...
    },
    clear: function () {
     ...
    }
  },
  mounted () {
     // => should perform the dictionary setup
     appValidationDictionarySetup(this.$validator)

    // start with current locale locale.
    this.$validator.localize(this.language)
  }
}
</script>

和一个共享的js文件appValidationDictionary.js

appValidationDictionary.js

import { Validator } from 'vee-validate'


// LOCALIZATION
const dict = {
  en: { custom: { honorificPrefix: { mrs: 'Mrs', mr: 'Mr' } } },
  br: { custom: { honorificPrefix: { mrs: 'Sra', mr: 'Sr' } } },
  fr: { custom: { honorificPrefix: { mrs: 'Mme', mr: 'Mr' } } }
}

Validator.localize('en', dict.en)
Validator.localize('br', dict.br)
Validator.localize('fr', dict.fr)

var appValidationDictionarySetup = function (validator) { {
validator.localize('en', {
  messages: English.messages,
  attributes: {
    email: 'Email Address',
    givenName: 'First Nama',
    familyName: 'Name',
    messageContent: 'Message'
    //  other custom attributes
  },
  custom: {
    message: () => 'Message cannot be empty',
    select: 'Select field is required',
    correct_all: 'Please correct all errors in your form',
    error: 'Error',
    axiosPostError: 'Oops! An error occured and your message could not be sent.',
    success: 'Thanks',
    contactMsgSent: 'Your message has been successfully sent. We\'ll be in touch soon.'
    //  other custom messages
  }
})
validator.localize('fr', {
  messages: French.messages,
  attributes: {
    email: 'Adresse courriel',
    name: 'Nom',
    messageContent: 'Message'
    // autres attributs spécifiques
  },
  custom: {
    message: () => 'Vous n\'avez pas fourni de message',
    select: 'Vous devez sélectionner une option',
    correct_all: 'Veuillez corriger toutes les erreurs dans votre formulaire',
    error: 'Erreur',
    axiosPostError: 'Oops! Une erreur est survenue et votre message n\'a pas pu être envoyé',
    success: 'Merci',
    contactMsgSent: 'Votre message a été envoyé avec succès. Nous entrerons bientôt en contact avec vous.'
    //  other custom messages
  }
})
validator.localize('br', {
  messages: Portuguese.messages,
  attributes: {
    email: 'Endereço de e-mail',
    name: 'Nome',
    messageContent: 'Messagem'
    // outros atributos personalizados
  },
  custom: {
    message: () => 'Messagem cnão pode estar vazio',
    select: 'Selecione campo é obrigatório',
    correct_all: 'Por favor, corrija todos os erros em seu formulário',
    error: 'Erro',
    axiosPostError: 'Opa! Ocorreu um erro e sua mensagem não pôde ser enviada.',
    success: 'Obrigado',
    contactMsgSent: 'Sua mensagem foi enviada com sucesso. Nós entraremos em contato em breve.'
    //  other custom messages
  }
})
}
export { appValidationDictionarySetup }

如果可能，我应该如何正确编写 js 文件以及如何从我的组件中正确请求它？

感谢反馈

Answer 1

已解决

在我的表格中我必须添加

import appValidationDictionarySetup from '@/locales/appValidationDictionary'

在 mounted() Hook 中

 mounted () {
appValidationDictionarySetup(this.$validator)
// start with current locale locale.
this.$validator.localize(this.language)

在 appValidationDictionary.js 中，我可以移动所有内容并导出函数

import { Validator } from 'vee-validate'

import English from 'vee-validate/dist/locale/en'
import French from 'vee-validate/dist/locale/fr'
import Portuguese from 'vee-validate/dist/locale/pt_BR'

// LOCALIZATION
const dict = {
  en: { custom: { honorificPrefix: { mrs: 'Mrs', mr: 'Mr' } } },
  br: { custom: { honorificPrefix: { mrs: 'Sra', mr: 'Sr' } } },
  fr: { custom: { honorificPrefix: { mrs: 'Mme', mr: 'Mr' } } }
}

Validator.localize('en', dict.en)
Validator.localize('br', dict.br)
Validator.localize('fr', dict.fr)

export default function appValidationDictionarySetup (validator) {
  validator.localize('en', {
    messages: English.messages,
    attributes: {
      email: 'Email Address',
      givenName: 'First Nama',
      familyName: 'Name',
      messageContent: 'Message'
      //  other custom attributes
    },
    custom: {
      message: () => 'Message cannot be empty',
      select: 'Select field is required',
      correct_all: 'Please correct all errors in your form',
      error: 'Error',
      axiosPostError: 'Oops! An error occured and your message could not be sent.',
      success: 'Thanks',
      contactMsgSent: 'Your message has been successfully sent. We\'ll be in touch soon.'
      //  other custom messages
    }
  })
  validator.localize('fr', {
    messages: French.messages,
    attributes: {
      email: 'Adresse courriel',
      name: 'Nom',
      messageContent: 'Message'
      // autres attributs spécifiques
    },
    custom: {
      message: () => 'Vous n\'avez pas fourni de message',
      select: 'Vous devez sélectionner une option',
      correct_all: 'Veuillez corriger toutes les erreurs dans votre formulaire',
      error: 'Erreur',
      axiosPostError: 'Oops! Une erreur est survenue et votre message n\'a pas pu être envoyé',
      success: 'Merci',
      contactMsgSent: 'Votre message a été envoyé avec succès. Nous entrerons bientôt en contact avec vous.'
      //  other custom messages
    }
  })
  validator.localize('br', {
    messages: Portuguese.messages,
    attributes: {
      email: 'Endereço de e-mail',
      name: 'Nome',
      messageContent: 'Messagem'
      // outros atributos personalizados
    },
    custom: {
      message: () => 'Messagem cnão pode estar vazio',
      select: 'Selecione campo é obrigatório',
      correct_all: 'Por favor, corrija todos os erros em seu formulário',
      error: 'Erro',
      axiosPostError: 'Opa! Ocorreu um erro e sua mensagem não pôde ser enviada.',
      success: 'Obrigado',
      contactMsgSent: 'Sua mensagem foi enviada com sucesso. Nós entraremos em contato em breve.'
      //  other custom messages
    }
  })
}