Vue.js 表单校验问题:起始时间校验不生效的解决方法
根据提供的代码,可以看出在清空起始时间的函数'clearIncomePeriodDateStart()'中,已经正确地清空了起始时间'this.form.incomePeriodDateStart',并通过'this.$refs.form.clearValidate('incomePeriodDateStart')'方法清除了对该字段的校验。
而在起始时间校验函数'checkStartTime()'中,当起始时间或结束时间为空时会通过'callback(new Error('起始时间不能为空'))'进行校验错误提示。如果起始时间不为空,则会将起始时间和结束时间进行比较,如果起始时间大于结束时间,则同样会通过'callback(new Error('起始时间不能大于结束时间'))'进行校验错误提示。
根据提供的代码,起始时间校验函数应该是正确的,而且每次填写时间都会进行校验。如果后续填写时间不会提示错误,可能是因为该字段已经通过其他的校验函数或者其他逻辑进行了校验,并且通过了校验。
如果希望每次填写时间都进行起始时间校验,可以在填写时间的地方调用'this.$refs.form.validateField('incomePeriodDateStart')'方法,强制对起始时间进行校验。
另外,如果需要在起始时间校验成功后清除校验错误提示,可以在起始时间校验成功的地方调用'this.$refs.form.clearValidate('incomePeriodDateStart')'方法,清除校验错误提示。
完整代码示例:
clearIncomePeriodDateStart() {
this.form.incomePeriodDateStart = ''; // 清空起始时间
this.$nextTick(() => {
this.$refs.form.clearValidate('incomePeriodDateStart'); // 清除校验
});
},
checkStartTime(rule, value, callback) {
if (!this.form.incomePeriodDateStart || !this.form.incomePeriodDateEnd) {
callback(new Error('起始时间不能为空'));
} else {
const startDate = new Date(this.form.incomePeriodDateStart);
const endDate = new Date(this.form.incomePeriodDateEnd);
if (startDate > endDate) {
this.form.incomePeriodDateStart = '';
callback(new Error('起始时间不能大于结束时间'));
} else {
this.$refs.form.clearValidate('incomePeriodDateStart'); // 清除校验错误提示
callback();
}
}
},
// 填写时间的地方
handleIncomePeriodDateStartChange() {
this.$refs.form.validateField('incomePeriodDateStart'); // 强制校验起始时间
},
在填写时间的地方,例如一个输入框的'change'事件回调函数'handleIncomePeriodDateStartChange'中,调用'this.$refs.form.validateField('incomePeriodDateStart')'方法,可以强制对起始时间进行校验,并显示校验错误提示。
希望以上解答对你有帮助!如果还有其他问题,请随时提问。
原文地址: https://www.cveoy.top/t/topic/o9ey 著作权归作者所有。请勿转载和采集!