Vue.js BootstrapVue:Veevalidate无法验证日期选择器

时间:2019-12-22 12:04:49

标签: vue.js datepicker vue-component bootstrap-vue vee-validate

在我的Laravel + Vue.js SPA(单页应用程序)中,我正在使用here中的datepicker包,here中的BootstrapVue和here中的Veevalidate。

我认为我只需要显示组件文件中的代码,因为仅datepicker组件会导致问题,而其他问题则不会。我的代码如下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="dob" rules="required" name="dob" v-slot="{ valid, errors }">
                    <b-form-group
                            label="Date of Birth:"
                            label-for="exampleInput1"
                            >

                              <datepicker
                                    type="text"
                                    v-model="dob"
                                    required
                                    format="d-M-yyyy"
                                    :state="errors[0] ? false : (valid ? true : null)"
                                    >
                              </datepicker>

                        <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: "",
        dob:""
    }),
    methods: {

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

        resetForm() {
            this.name = "";
            this.dob = "";
            requestAnimationFrame(() => {
                this.$refs.form.reset();
            });
        }

}
};

按下提交按钮后,name字段将进行验证,但是dob上的datepicker字段为空时,不会显示错误消息。

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

如何使日期选择器的验证也有效?

0 个答案:

没有答案