Question

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

The address_line_1 field is required.

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

Answer 1

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

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

Answer 2

对于 VeeValidate v3 ，您可以为name

传递ValidationProvider属性

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

Answer 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");

Answer 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

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

4 个答案: