如何在 VeeValidate (Vue.Js) 上使用字典自定义 "required" 错误消息

Question

我想更改未填写 "cpf" 规则的输入时的错误消息（换句话说，当 "cpf" 规则的输入不满足 "required"规则）。

我认为带有自定义消息的 "dictionary method" 应该可以完成工作，但我做不到。

使用下面的代码，显示的错误消息只是 默认 pt_br 消息 "required"领域。我想在下面的词典 dict 中显示消息 ("Favor preencher o cpf")

在我的main.js中，我有以下代码：

import Vue from 'vue';
import App from './App.vue';
import './core/extensions';

new Vue({
  render: h => h(App),
}).$mount('#app');

然后 extensions.js:

 import Vue from 'vue';
 import VeeValidate, { Validator } from 'vee-validate';
 import ptBR from 'vee-validate/dist/locale/pt_BR';

 const dict = {
     messages: ptBR.messages,
     pt_BR: {
      custom: {
         cpf: {
           required: 'Favor preencher o cpf',
         },
       }
     },
   };

Vue.use(VeeValidate);

Validator.localize({ pt_BR: dict })

Validator.extend('cpf', (val) => {
     return false //just to test
});

App.vue（简单例子）：

<template>
    <div id="app">
        <input type="text" v-validate="required|cpf">      
    </div>
</template>

我正在使用 vee-validate 2.1.5 和 vue 2.5.17

Answer 1

我相信在这种情况下验证器使用 cpf 作为字段名称而不是验证规则。

我不清楚为什么 cpf 规则应该触发 required 规则，但是如果你给输入一个 name 或 data-vv-name 属性，比如：

<input type="text" data-vv-name="cpf" v-validate="required">

并将以下参数传递给localize：

Validator.localize('pt_BR', {
  custom: {
    cpf: {
      required: 'Favor preencher o cpf'
    }
  }
})

当该字段为空时，将显示您的本地化消息。

这是一个字段特定错误消息的示例（根据需要将 'en' 替换为 'pt_BR'）

VeeValidate.Validator.localize('en', {
  custom: {
    cpf: {
      required: 'Favor preencher o cpf'
    }
  }
})

Vue.use(VeeValidate)

new Vue({
  el: '#app'
})

p {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vee-validate@latest"></script>
<div id="app">
  <input type="text" data-vv-name="cpf" v-validate="'required'">
  <p>{{ errors.first('cpf') }}</p>
</div>

Answer 2

看看官方文档中的Field-specific Custom Messages。

您基本上必须为要覆盖的每种语言提供自定义字典。

Answer 3

我觉得自定义错误消息不适用于 ValidateProvider 组件。

Answer 4

我得到了 vee-validate 自定义错误消息的简单方法： 1- 首先使用以下命令安装包 vee-validate

npm install vee-validate --save

2- 在main.js

中导入并注册以下内容

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';
import { ValidationObserver } from 'vee-validate';
Vue.component('ValidationProvider',ValidationProvider);
Vue.component('ValidationObserver',ValidationObserver);

3- 现在移动到您的组件并创建一个输入字段：

 <ValidationObserver v-slot="{ handleSubmit }">
                            <form @submit.prevent="handleSubmit(additem)">
                                <ValidationProvider name="Item" rules="required" v-slot="{ errors }">
                                    <div class="row">
                                        <label>Item</label>
                                        <textarea rows="5" id="item" data-vv-as="item1"  class="form-control" v-model="item"></textarea>
                                        <span>{{ errors[0] }}</span>
                                    </div>
                                </ValidationProvider>

                                <div class="row mt-3">
                                    <button class="btn btn-sm btn-primary" type="submit" >Save Item</button>
                                </div>
                            </form>
                        </ValidationObserver>

4- 现在导入 localize 从你导入 ValidationProvider 的地方如下在脚本标签中的 vue 组件中。

import {localize} from "vee-validate/dist/vee-validate.full.esm";
localize({

    en: {
        fields: {
            Item: {
                required: "Please enter some title",
                // alpha: "please enter alphabets only"
            }
        }
    }
});
    localize("en");

如何在 VeeValidate (Vue.Js) 上使用字典自定义 "required" 错误消息

How to customize "required" error messages using a dictionary on VeeValidate (Vue.Js)

javascript

vue.js

vuejs2

vee-validate