Question

当未填写带有“ cpf”规则的输入（换句话说，带有“ cpf”规则的输入不满足“必需”规则的输入）时，我想更改错误消息。

我认为带有自定义消息的“词典方法”应该可以完成工作，但是我无法使其工作。

使用以下代码，显示的错误消息只是“必填”字段的 默认pt_br 消息。我想在下面的词典 dict 中显示该消息（“ 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'
    }
  }
})

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

这是特定于字段的错误消息的示例（根据需要用“ pt_BR”替换“ en”）

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- 现在导入本地化从您导入 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）上的字典来自定义“必需”错误消息

4 个答案: