vee-validate 中的自定义验证消息

Question

我正在使用 Laravel - 5.8 和 Vue.js。我的问题是关于如何为 Vee-Validate 库中的规则显示自定义错误消息。我的“必需”规则的自定义消息没有显示，而是显示：“名字字段是必需的。”预期的消息是“请输入名字”。

下面的代码在 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>

我错过了什么吗？

原文由 Pankaj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

custom 关键字已在版本 3 中删除。现在替换为 fields 。 文档中也缺少此信息

有关更多信息，请关注 github 上的此问题链接

原文由 Pankaj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一般地执行此操作的一种方法是使用 --- 将其附加到特定语言，即使用 localize extend() ：

 import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
    ...required,
    message: 'Please enter first name',
});

这将传播并包括规则的所有默认属性，同时仍然允许您添加自己的自定义消息。

国际化示例：

 import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';
import i18n from 'localization';

extend('required', {
    ...required,
    message: i18n.t('LOCALIZATION_PATH'),
});

原文由 zcoop98 发布，翻译遵循 CC BY-SA 4.0 许可协议