在我的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)。
如何使日期选择器的验证也有效?