【发布时间】：2018-12-21 14:16:33
【问题描述】：
目前，我正在使用 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 文件以及如何从我的组件中正确请求它？
感谢反馈
【问题讨论】：
标签： vue.js vee-validate