我正在使用Laravel-5.8和Vue.js。我的问题是关于如何显示Vee-Validate库中规则的自定义错误消息。我的"required"规则的自定义消息没有显示,而是如下所示:"first_name字段为必填字段。"预期消息为"请输入名字"。
- 以下代码位于app. js中**
import { ValidationProvider } from 'vee-validate/dist/vee-validate.full';
- 这是HTML组件代码。**
<template>
<div>
<form role="form">
<ValidationProvider name="first_name" :rules="required">
<div slot-scope="{ errors }">
<input v-model="profileForm.first_name" class="form-control">
<p>{{ errors[0] }}</p>
</div>
</ValidationProvider>
<button type="button" @click="validateBeforeSubmit()">Update Profile</button>
</form>
</div>
</template>
- 下面是我的JS脚本代码**
<script>
import { localize } from 'vee-validate/dist/vee-validate.full';
import en from "vee-validate/dist/locale/en.json";
export default {
data() {
return {
profileForm: {
first_name: ''
},
customMessages: {
en: {
custom: {
'first_name': {
required: 'Please enter first name'
}
}
}
},
}
},
created() {
localize("en", this.customMessages);
},
methods: {
validateBeforeSubmit() {
this.$validator.validateAll();
}
}
}
</script>
我错过什么了吗?
7条答案
按热度按时间pw136qt21#
一种通用的方法是使用
extend()
,而不是像localize
那样将其附加到特定的语言:这将扩展并包括规则的所有默认属性,同时仍允许您添加自己的自定义消息。
国际化示例:
djp7away2#
custom
关键字已在版本3中删除。现在替换为fields
。文档中也缺少此信息e5nqia273#
很简单的一个。虽然不好,但很管用。
cngwdvgl4#
感谢@pankaj给出正确答案。对于那些懒得点击链接的人,文档提供了以下解决方案:
hfwmuf9z5#
我认为你需要传递
this.customMessages.en
到localize()
,或者传递的对象有一个顶级属性en
。传递的字典应该只包含你的自定义消息。uyto3xhc6#
自定义消息可以通过'extend'添加,如@zcoop98所示。应该注意的是,如果我们像这样使用属性'
message: () => i18n.t ('LOCALIZATION_PATH')
,它将被翻译vpfxa7rd7#
使用vee验证3