一、template里的代码
<el-form-item label="会议开始时间" prop="startTime">
<el-date-picker :disabled="isEdit" v-model.trim="formInline.startTime" type="datetime" placeholder="选择开始时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="会议结束时间" prop="endTime">
<el-date-picker :disabled="isEdit" v-model="formInline.endTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" align="right">
</el-form-item>
二、表单验证
data() {
// 时间的校验
var validateStartTime = (rule, value, callback) => {
if (value === undefined) {
callback(new Error('开始时间不能为空'))
} else {
if (new Date(this.formInline.startTime).getTime() <= new Date().getTime()) {
callback()
} else {
callback()
}
}
};
var validateEndTime = (rule, value, callback) => {
if (value === undefined) {
callback(new Error('结束时间不能为空'))
} else {
if (
new Date(this.formInline.startTime).getTime() >=
new Date(this.formInline.endTime).getTime()
) {
callback(new Error('结束时间必须大于开始时间!'))
} else {
callback()
}
}
}
return {
formRules: {
name: [
{ required: true, message: '请输入会议名称', trigger: 'blur' },
],
startTime: [
{ required: true, validator: validateStartTime, trigger: 'blur' },
],
endTime: [
{ required: true, validator: validateEndTime, trigger: 'blur' },
],
},
}
},
三、验证