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（）挂钩中

 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
    }
  })
}

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

1 个答案: