Используйте отображаемое имя (метку) для VeeValidate 3 при ошибках - PullRequest
Новая
       7

Используйте отображаемое имя (метку) для VeeValidate 3 при ошибках

2 голосов
/ 10 марта 2020

Как изменить «имя», отображаемое при ошибках проверки. Я знаю, что могу изменить его с помощью свойства "name", но я хочу оставить его таким, чтобы оно соответствовало ошибкам валидации из бэкэнда. Я не хочу менять имя атрибута в бэкэнде на что-то описательное. Для лучшего понимания пользователей я хочу использовать более понятное имя при ошибках веб-интерфейса.

Я использую Boostrap- Vue, Laravel 6 и VeeValidate 3. Это код, который я использую сейчас. Поэтому вместо " url это обязательное поле". Я хочу показать, например, « Ссылка является обязательным полем» без изменения атрибута 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>

Любые подсказки приветствуются! Спасибо.

1 Ответ

2 голосов
/ 10 марта 2020 
            <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 будет использоваться только в сообщениях об ошибках.

...