Question

在我的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元素的错误消息显示为红色？

Answer 1

在引导程序中，仅当无效反馈的同级输入（或选择等）设置为状态is-invalid时，才会显示无效反馈。 vue电话号码输入可能不符合该条件。因此，相反，您应该使错误消息如下：

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

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

1 个答案: