这前端是真的难,就这一个校验搞了快大半天,查出来的结果还都不怎么好用。
最后是参考的http://www.manongjc.com/detail/16-hyixjugqukmcvjc.html
在自己这记录一下。
<el-form-item label="开始时间" prop="dateFrom">
<el-date-picker
clearable
size="small"
v-model="form.dateFrom"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="开始时间"
@change="handelDateFrom"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="dateTo">
<el-date-picker
clearable
size="small"
v-model="form.dateTo"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="结束时间"
@change="handelDateTo"
></el-date-picker>
</el-form-item>
data () {
return {
//这个例子在上午的时候用过了,并没有生效,是这里忘了加双向绑定。。。。
dateFrom: null,
dateTo: null,
}
}
// 表单校验
rules: {
dateFrom: [
{ required: true, message: "开始时间不能为空", trigger: "change" },
{
validator: this.validationDateFrom
}
],
dateTo: [
{ required: true, message: "结束时间不能为空", trigger: "change" },
{
validator: this.validationDateTo
}
]
}
methods: {
// 自定义验证规则(校验开始日期)
validationDateFrom: function (rule, value, callback) {
// 比较时间戳(进行运算的时候会自动转换成时间戳进行运算,不运算的时候,显示中国标准时间格式)
if (
new Date(this.form.dateTo) - new Date(value) <= 0 &&
this.form.dateTo &&
value
) {
return callback(new Error('*开始时间不能大于结束时间'))
}
callback()
},
// 自定义验证规则(校验截止日期)
validationDateTo: function (rule, value, callback) {
// 比较时间戳(进行运算的时候会自动转换成时间戳进行运算,不运算的时候,显示中国标准时间格式)
if (
new Date(value) - new Date(this.form.dateFrom) <= 0 &&
this.form.dateTo &&
value
) {
return callback(new Error('*结束时间不能小于开始时间'))
} callback()
},
// 当开始时间变化时,需要重新校验
handelDateFrom (value) {
if (
new Date(this.form.dateTo) - new Date(value) > 0 &&
this.form.dateTo &&
value
) {
// 重新校验
this.$refs.form.validate()
}
},
handelDateTo (value) {
if (
new Date(value) - new Date(this.form.dateFrom) > 0 &&
this.form.dateFrom &&
value
) {
this.$refs.form.validate()
}
}
}