时间戳

首页 > 解决方案 > 错误时为 VeeValidate 3 使用自定义显示名称（标签）

javascript - 错误时为 VeeValidate 3 使用自定义显示名称（标签）

问题描述

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

我使用 Boostrap-Vue、Laravel 6 和 VeeValidate 3。这是我现在使用的代码。因此，不要使用“ url是必填字段”。我想在不更改名称属性的情况下显示例如“链接是必填字段” 。

    <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>

任何提示表示赞赏！谢谢你。

标签： javascriptlaravelvue.jsvee-validate

解决方案

            <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将仅在错误消息中使用。

推荐阅读