Vue.js vee-validate Настройка пользовательского словаря

В настоящее время я занимаюсь локализацией валидационных сообщений ( 3 языка) с vue-validate в каждом компоненте формы ( contactForm, registrationForm, ...)

т.е. для contactForm

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} из 'vee-validate'

// ЛОКАЛИЗАЦИЯ 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 и как правильно запросить его у моих компонентов?

спасибо за отзыв

Источник

1 ответ

РЕШИТЬ

В моих формах я должен добавить

import appValidationDictionarySetup from '@/locales/appValidationDictionary'

и в установленном () крюке

 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
    }
  })
}
Источник
Другие вопросы по тегам