如何在 VeeValidate 中自定义错误信息（字段名称）？答案

【问题标题】：How to customize error message (field name) in VeeValidate?如何在 VeeValidate 中自定义错误信息（字段名称）？
【发布时间】：2017-08-21 13:28:27
【问题描述】：

当VeeValidate 选择一个无效字段时，它会使用字段名称输出错误，例如。

The address_line_1 field is required.

是否可以在错误消息中使用字段标签或其他属性，因为字段名称并不总是用户友好的？

【问题讨论】：

为什么不使用用户友好的字段名称？ jsfiddle.net/d46tqnhv
因为字段名匹配数据库结构。

标签： forms validation vue.js vuejs2

【解决方案1】：

您可以使用data-vv-as，它将显示在错误消息中。 Read more here。

<input type="text" name="address_line_1" data-vv-as="Address Line 1" />

编辑：更新了文档参考here。

【讨论】：

@RohitSharma 请检查更新文档的新 URL。
新的 URL 似乎也被破坏了 :(
@PROgram52bc 有一个新的主要版本，因为这个问题被问到并且它处理错误消息的方式非常不同，所以你应该尽可能迁移到最新版本logaretm.github.io/vee-validate/…

【解决方案2】：

对于 VeeValidate v3，您可以为 ValidationProvider 传递 name 属性

<ValidationProvider name="first name" rules="required|min:2" v-slot="{ errors }">

【讨论】：

【解决方案3】：

我得到了 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: {
names:{ Item: "ITEM FEILD", firstname: "First Name"},
        fields: {
            Item: {
                required: "Please enter some title",
                // alpha: "please enter alphabets only"
            }
        }
    }
});
    localize("en");

【讨论】：

【解决方案4】：

如果您需要将字段名称自定义为多字字符串，则在尝试在另一个规则中定位此字段时会遇到问题。在 Vee Validate 3.x 中，您可以使用 vid 属性来识别每个字段，并在错误消息中为显示文本留下名称属性。

例子：

<validation-provider rules="required" vid="startDate" name="Start date" v-slot="{ errors }">

然后您可以将 vid 标识符用作另一个验证提供程序规则中的目标。

<validation-provider :rules="{greaterThanDate: {startDate: '@startDate'}}" 
name="End date" v-slot="{ errors }" vid="endDate">

Reference

【讨论】：