组件结构里的内容

// An highlighted block
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="150px" class="demo-ruleForm">
	<el-form-item label="开始时间：" prop="startTime">
	 <el-date-picker
	     v-model="addForm.startTime"
	     type="datetime"
	     :picker-options="pickerOptions"
	     value-format="yyyy-MM-dd HH:mm:ss"
	     placeholder="开始时间">
	 </el-date-picker>
	</el-form-item>
	<el-form-item label="结束时间：" prop="endTime">
	 <el-date-picker
	     v-model="addForm.endTime"
	     value-format="yyyy-MM-dd HH:mm:ss"
	     type="datetime"
	     :picker-options="pickerOptions"
	     placeholder="结束时间"
	     align="right">
	 </el-date-picker>
	</el-form-item>
</el-form>

手写校验

// 时间的校验
const validateStartTime = (rule, value, callback) => {
            if (value === undefined) {
                callback(new Error('开始时间不能为空'))
            } else {
                if (new Date(this.addForm.startTime).getTime() <= new Date().getTime()) {
                callback()
                } else {
                callback()
                }
            }
        }
        const validateEndTime = (rule, value, callback) => {
            if (value === undefined) {
                callback(new Error('结束时间不能为空'))
            } else {
                if (
                new Date(this.addForm.startTime).getTime() >=
                new Date(this.addForm.endTime).getTime()
                ) {
                callback(new Error('截止时间必须大于开始时间！'))
                } else {
                callback()
                }
            }
        }

from表单的校验

// An highlighted block
rules:{
		startTime: [
            {required: true, validator: validateStartTime, trigger: 'blur' },
         ],
         endTime: [
            { required: true, validator: validateEndTime, trigger: 'blur' },
         ],
}