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 },
        ],
      }
    };
经验分享 程序员 微信小程序 职场和发展