Vue.js BootstrapVue：Veevalidate 不显示电话号码输入的验证错误消息

Posted 2023-02-22

【中文标题】Vue.js BootstrapVue：Veevalidate 不显示电话号码输入的验证错误消息

【英文标题】：Vue.js BootstrapVue : Veevalidate does not show the validation error mesage for phone number input

【发布时间】：2020-04-14 03:02:57

【问题描述】：

在我的 Laravel+Vue.js SPA（单页应用程序）中，我使用来自here 的电话号码输入验证包、来自here 的 BootstrapVue 和来自here 的 Veevalidate。

我想我只需要显示我的组件文件中的代码。 vue-phone-number-input 组件在无效数据时显示蓝色边框和 html5 错误消息工具提示 (?)，但 没有错误消息显示为红色，因为它发生在 name 字段。我的代码在EditProfile.vue:

<ValidationObserver ref="form" v-slot=" passes ">

        <div id="registration_form">

            <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">

                <ValidationProvider vid="name" rules="required|min:2" name="name" v-slot=" valid, errors ">
                    <b-form-group
                            label="User Name:"
                            label-for="exampleInput1"

                    >
                        <b-form-input
                                type="text"
                                v-model="name"
                                :state="errors[0] ? false : (valid ? true : null)"
                                placeholder="Enter your name"
                        ></b-form-input>

                        <b-form-invalid-feedback id="inputLiveFeedback"> errors[0] </b-form-invalid-feedback>

                    </b-form-group>

                </ValidationProvider>


                <ValidationProvider vid="mobile" rules="required" name="mobile" v-slot=" valid, errors ">
                <b-form-group
                        label="Mobile:"
                        label-for="exampleInput1"

                >

                    <vue-phone-number-input

                            v-model="mobile"
                            default-country-code="BD"
                            required
                            disable-leading-trailing-space
                            :state="errors[0] ? false : (valid ? true : null)"
                            @update="updatePhoneNumber"
                            placeholder="Enter Mobile Number"
                    />

                   <b-form-invalid-feedback id="inputLiveFeedback"> errors[0] </b-form-invalid-feedback>

                </b-form-group>
            </ValidationProvider>



                <b-button type="submit" variant="primary">Submit</b-button>
                <b-button type="reset" variant="danger">Reset</b-button>

            </b-form>

        </div><!-- end of id registration_form-->
    </ValidationObserver>

EditProfile.vue里面的JS部分是：

import Datepicker from 'vuejs-datepicker';
import  ValidationObserver, ValidationProvider  from "vee-validate";

export default 
    name: "EditProfile",
    components: 
        ValidationObserver,
        ValidationProvider,
        Datepicker
            ,
    data: () => (
        name: "",
        mobile:""
    ),
    methods: 

       onSubmit() 
            console.log("Form submitted yay!");
                  ,

        resetForm() 
            this.name = "";
            this.mobile = "";
            requestAnimationFrame(() => 
                this.$refs.form.reset();
            );
        


;

按下提交按钮后，name 字段和vue-phone-number-input 的验证工作也会发生，但不会以红色显示错误消息。

我的 Vue.js 版本是 2.6.10，我也使用了最新版本的 BootstrapVue 和 Veevalidate (3)。

如何使vue-phone-number-input 元素的错误消息显示为红色？

【参考方案1】：

在引导程序中，仅当它具有设置为状态 is-invalid 的同级输入（或选择等）时才会显示无效反馈。 vue-phone-number-input 可能不符合该标准。所以，你应该这样写错误信息：

<span class="text-danger" v-show="errors[0]"> errors[0] </span>