elementui ui表单验证区间
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
<el-form-item
:rules="[{ minTime: ruleForm.available_after, validator: validateRate, trigger: 'blur' },{required: true, message: '上线时间', trigger: 'blur'}]"
label="上线时间" prop="available_after">
<el-date-picker
v-model="ruleForm.available_after"
format="yyyy-MM-dd HH:mm"
placeholder="选择上线时间"
size="small"
type="datetime"
value-format="timestamp"
></el-date-picker>
</el-form-item>
<el-form-item
:rules="[{ maxTime: ruleForm.available_before, validator: validateRate, trigger: 'blur' },{required: true, message: '下线时间', trigger: 'blur'},]"
label="下线时间" prop="available_before">
<el-date-picker
v-model="ruleForm.available_before"
format="yyyy-MM-dd HH:mm"
placeholder="选择下线时间"
size="small"
type="datetime"
value-format="timestamp"
></el-date-picker>
</el-form-item>
<el-form-item label="">
<el-button size="small" type="primary" @click="submitForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
//上线时间 下线时间验证
validateRate(rule, value, callback) {
if (this.ruleForm.available_before === '' && this.ruleForm.available_after === '') {
callback(new Error('请选择时间'))
} else if (this.ruleForm.available_before == '' && this.ruleForm.available_after || this.ruleForm.available_after == '' && this.ruleForm.available_before) {
callback()
} else if (this.ruleForm.available_before <= this.ruleForm.available_after) {
callback(new Error('上线时间不能大于下线时间'))
} else {
if (this.$refs.ruleForm.fields[3].validateMessage) {
this.$refs.ruleForm.fields[3].clearValidate();
}
if (this.$refs.ruleForm.fields[4].validateMessage) {
this.$refs.ruleForm.fields[4].clearValidate();
}
callback();
}
},
