VUE校验input框结束输入不能小于开始输入
VUE校验input框结束输入不能小于开始输入
<el-form :model="form" size="small" :rules="rules" ref="form" label-width="150px"> <el-row :gutter="20"> <el-col :span="10"> <el-form-item label="开始" prop="Begin"> <el-input v-model="form.Begin" placeholder="请输入开始" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="结束" prop="End"> <el-input v-model="form.End" placeholder="请输入结束" /> </el-form-item> </el-col> </el-row>
data() {
var validateStart = (rule, value, callback) => {
if(this.form.End){
this.$refs.form.validateField(End);
}
callback();
};
var validateEnd = (rule, value, callback) => {
if(this.form.Begin){
if(Number(this.form.Begin) < Number(value)){
callback();
}else{
callback(new Error(结束必须大于开始));
}
}else{
callback();
}
};
return {
// 表单参数
form: {
Begin: ,
End: ,
},
// 表单校验
rules: {
Begin: [
{ required: true, message: 请输入开始, trigger: blur },
{ validator: validateStart, trigger: blur },
],
End: [
{ required: true, message: 请输入结束, trigger: blur },
{ validator: validateEnd, trigger: blur },
],
}
};
