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

ar7v8xwq  于 2023-02-09  发布在  Vue.js
关注(0)|答案(7)|浏览(204)

我正在使用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>

我错过什么了吗?

pw136qt2

pw136qt21#

一种通用的方法是使用extend(),而不是像localize那样将其附加到特定的语言:

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'),
});
djp7away

djp7away2#

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

    • 一个
e5nqia27

e5nqia273#

很简单的一个。虽然不好,但很管用。

<input name="yourFieldName" type="text" class="form-control" v-model="yourFieldName" v-validate="'alpha_spaces'">

<span class="small text-danger">{{ errors.first('yourFieldName')?'Your custome message':'' }}</span>
cngwdvgl

cngwdvgl4#

感谢@pankaj给出正确答案。对于那些懒得点击链接的人,文档提供了以下解决方案:

import { localize } from 'vee-validate';

localize({
  en: {
    messages: {
      // generic rule messages...
    },
    fields: {
      password: {
        required: 'Password cannot be empty!',
        max: 'Are you really going to remember that?',
        min: 'Too few, you want to get doxed?'
      }
    }
  }
});
hfwmuf9z

hfwmuf9z5#

我认为你需要传递this.customMessages.enlocalize(),或者传递的对象有一个顶级属性en。传递的字典应该只包含你的自定义消息。

uyto3xhc

uyto3xhc6#

自定义消息可以通过'extend'添加,如@zcoop98所示。应该注意的是,如果我们像这样使用属性'message: () => i18n.t ('LOCALIZATION_PATH'),它将被翻译

vpfxa7rd

vpfxa7rd7#

使用vee验证3

<ValidationProvider
  name="first_name"
  rules="required"
  :custom-messages="{required: 'Ooops, this is the message'}"
>

相关问题