一个开始时间,一个结束时间,理论上开始时间是不能大于结束时间的,所以在前台进行表单提交时,需要对其进行验证,保证数据正确性.
form表单的绑值:
<el-form-item :rules="rules" label="生效日期">
<div class="flex">
<el-form-item prop="startTime" >
<el-date-picker
v-model="form.startTime"
type="datetime"
size="medium "
placeholder="请选择开始日期"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</el-form-item>
<el-form-item prop="endTime" >
<el-date-picker
v-model="form.endTime"
size="medium"
type="datetime"
placeholder="请选择结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</el-form-item>
</div>
</el-form-item>
在data里定义两个变量做判断:
// 定义两个变量
const startTime = (rules, value, callback) => {
if (!value) {
callback(new Error('请选择开始时间'))
} else {
if (this.form.endTime) {
this.$refs.form.validateField('endTime')
}
callback()
}
}
const endTime = (rules, value, callback) => {
if (!value) {
callback(new Error('请选择结束时间'))
} else {
if (!this.form.startTime) {
callback(new Error('请选择开始时间!'))
} else if (Date.parse(this.form.startTime) >= Date.parse(value)) {
callback(new Error('结束时间必须大于开始时间!'))
} else {
callback()
}
}
}
在return写检验规则:
// 检验规则
rules: {
startTime: [{
required: true,
validator: startTime,
trigger: 'blur'
}],
endTime: [{
required: true,
validator: endTime,
trigger: 'blur'
}]
}
form表单的rules绑定::rules="rules"
原文链接:https://blog.csdn.net/weixin_48931415/article/details/123045539