方法一：使用 Vue 表单验证
<template><div><form @submit.prevent="submitForm"><label>选择时间：<input type="datetime-local" v-model="selectedTime":min="minDateTime"required></label><div v-if="error" style="color: red;">{{ error }}</div><button type="submit">提交</button></form></div>
</template><script>
export default {data() {return {selectedTime: '',error: '',minDateTime: this.getMinDateTime()};},methods: {getMinDateTime() {const now = new Date();now.setHours(now.getHours() + 3);return now.toISOString().slice(0, 16);},validateTime() {if (!this.selectedTime) {this.error = '请选择时间';return false;}const selected = new Date(this.selectedTime);const now = new Date();const diffInHours = (selected - now) / (1000 * 60 * 60);if (diffInHours < 3) {this.error = '选择的时间必须至少比当前时间晚3小时';return false;}this.error = '';return true;},submitForm() {if (this.validateTime()) {// 表单验证通过，执行提交操作console.log('表单提交', this.selectedTime);}}}
};
</script>
方法二：使用 Vuelidate 或 VeeValidate
<template><div><ValidationObserver v-slot="{ handleSubmit }"><form @submit.prevent="handleSubmit(submitForm)"><ValidationProvider name="时间" rules="required|minTime:3"v-slot="{ errors }"><label>选择时间：<input type="datetime-local" v-model="selectedTime":min="minDateTime"></label><span style="color: red;">{{ errors[0] }}</span></ValidationProvider><button type="submit">提交</button></form></ValidationObserver></div>
</template><script>
import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';// 添加必填规则
extend('required', {...required,message: '请选择时间'
});// 添加自定义时间验证规则
extend('minTime', {validate(value, { hours }) {if (!value) return false;const selected = new Date(value);const now = new Date();const diffInHours = (selected - now) / (1000 * 60 * 60);return diffInHours >= hours;},params: ['hours'],message: '选择的时间必须至少比当前时间晚{hours}小时'
});export default {data() {return {selectedTime: '',minDateTime: this.getMinDateTime()};},methods: {getMinDateTime() {const now = new Date();now.setHours(now.getHours() + 3);return now.toISOString().slice(0, 16);},submitForm() {// 表单验证通过，执行提交操作console.log('表单提交', this.selectedTime);}}
};
</script>
