在出现错误时为 VeeValidate 3 使用自定义显示名称（标签）

Question

如何更改验证错误时显示的 "name"。我知道我可以使用属性 "name" 对其进行调整，但我想保留它的原样以使其与后端的验证错误相匹配。我不想将后端的属性名称更改为描述性的名称。为了让用户更好地理解，我想对前端错误使用更具描述性的名称。

我使用 Boostrap-Vue、Laravel 6 和 VeeValidate 3。这是我现在使用的代码。因此，而不是让“url 是必填字段。”我想展示例如“Link 是必填字段”而不更改 name 属性。

    <validation-observer ref="observer" v-slot="{ passes }">

        <b-form @submit.stop.prevent="passes(onSubmit)">
            <b-row>
                <b-col sm="2" lg="3">
                    <label for="url">{{ $t('channel.label_create_url') }}</label>
                </b-col>
                <b-col sm="10" lg="9">
                    <validation-provider
                        name="url"
                        :rules="{ required: true, min: 11, regex: /^(http:\/\/|https:\/\/)?[a-z0-9]+([\-.]{1}[a-z0-9]+)*\.[a-z]{2,}(:[0-9]{1,5})?(\/.*)?$/ }"
                        v-slot="validationContext"
                    >
                        <b-input
                            v-model="form.url"
                            :placeholder="$t('channel.placeholder_create_url')"
                            type="url"
                            size="lg"
                            name="url"
                            id="url"
                            required
                            autofocus
                            :state="getValidationState(validationContext)"
                            aria-describedby="input-url-live-feedback"
                        ></b-input>
                        <b-form-invalid-feedback
                            id="input-url-live-feedback">{{ validationContext.errors[0] }}
                        </b-form-invalid-feedback>
                    </validation-provider>
                </b-col>
            </b-row>
        </b-form>
    </validation-observer>

如有任何提示，我们将不胜感激！谢谢。

Answer 1

            <validation-provider
                vid="url"
                name="Link"
                :rules="{ required: true, min: 11, regex: /^(http:\/\/|https:\/\/)?[a-z0-9]+([\-.]{1}[a-z0-9]+)*\.[a-z]{2,}(:[0-9]{1,5})?(\/.*)?$/ }"
                v-slot="validationContext"
            >

您可以使用 vid 属性来标识验证提供程序，然后 name 将仅用于错误消息。

在出现错误时为 VeeValidate 3 使用自定义显示名称（标签）

Use a custom display name (label) for VeeValidate 3 on errors

javascript

laravel

vue.js

vee-validate