vue兩個輸入框聯(lián)動校驗(yàn)方式(最大值-最小值)

更新時間：2022年10月08日 10:08:56 作者：RAY_CHEN.

這篇文章主要介紹了vue兩個輸入框聯(lián)動校驗(yàn)方式(最大值-最小值)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue兩個輸入框聯(lián)動校驗(yàn)

如下圖，

1.滿足最大值和最小值的輸入要求【1-100的整數(shù)】

2.滿足最小值不能大于等于最大值

3.當(dāng)最小值有報紅校驗(yàn)，改正最大值使得最大值大于最小值，最小值的報紅校驗(yàn)消失

html代碼

最大值：

<el-input v-model="restoreForm.maxrate" placeholder="請輸入" style="margin-left:5px;width:140px" @blur="checknum('max')"></el-input>

最小值：

<el-input v-model="restoreForm.restorerate" placeholder="請輸入" style="margin-left:5px;width:140px" @blur="checknum('min')"></el-input>

代碼不全，僅作參考

data中的validate校驗(yàn)

//最小值
    const checkrestorerate = (rule, value, callback) => {
      const { maxrate, restorerate } = this.restoreForm;
 
      // let reg = /^([1-9]|[1-9]\d|1\d{2}|100)$/;
      let reg = /^([1-9][0-9]{0,1}|100)$/;
      if (!reg.test(restorerate)) {
        return callback(new Error("請輸入1-100內(nèi)整數(shù)"));
      } else {
        if (
          Number(maxrate) &&
          Number(restorerate) &&
          Number(restorerate) >= Number(maxrate)
        ) {
          return callback(new Error("最小值需小于最大值"));
        } else {
          return callback();
        }
      }
    };
    //最大值
    const checkmaxrate = (rule, value, callback) => {
      const { maxrate, restorerate } = this.restoreForm;
      let reg = /^([1-9][0-9]{0,1}|100)$/;
      if (!reg.test(maxrate)) {
        return callback(new Error("請輸入1-100內(nèi)整數(shù)"));
      } else {
        if (
          Number(maxrate) &&
          Number(restorerate) &&
          Number(restorerate) >= Number(maxrate)
        ) {
          return callback(new Error("最小值需小于最大值"));
        } else {
          return callback();
        }
      }
    };

 checknum(type) {
      if (type === "max") {
        if (this.restoreForm.maxrate > this.restoreForm.restorerate) {
          this.$refs.restoreForm.validateField("restorerate");
        }
      } else {
        if (this.restoreForm.maxrate > this.restoreForm.restorerate) {
          this.$refs.restoreForm.validateField("maxrate");
        }
       
      }
    },

這個方法首先判斷是哪個輸入框的blur事件，然后如果符合最大值大于最小值，那么之前最小值的報錯校驗(yàn)再次校驗(yàn)，為符合條件，即報紅提示消失

vue表單中范圍兩個輸入框共用一個驗(yàn)證

最近碰到一個需求，就是一個有一項(xiàng)數(shù)據(jù)取一個范圍，并做驗(yàn)證，但是UI的驗(yàn)證提醒文字是合并在一起的，并不是每個輸入框有單獨(dú)的驗(yàn)證提醒，本文以elementUI為例，按需求進(jìn)行了一些改動。

<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="范圍" prop="area">
        <el-col :span="11">
          <el-form-item prop="start">
            <el-input v-model="ruleForm.start" placeholder="請輸入起始值(0-1000)" />
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center">-</el-col>
        <el-col :span="11">
          <el-form-item prop="end">
            <el-input v-model="ruleForm.end" placeholder="請輸入結(jié)束值(0-1000)" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    const validateStart = (rule, value, callback) => {
      if (!!value) {
        // 1-1000的正則
        const numReg = /^(?!00)(?:[0-9]{1,3}|1000)$/
        if (!numReg.test(value)) {
          this.ruleForm.areaRules[0] = 1
          // 手動觸發(fā)最外層form-item的正則驗(yàn)證
          this.areaBlur()
          return callback()
        }
        if (numReg.test(value)) {
          this.ruleForm.areaRules[0] = 2
          this.areaBlur()
          return callback()
        }
        this.ruleForm.areaRules[0] = 0
        this.areaBlur()
        callback()
      } else {
        this.ruleForm.areaRules[0] = -1
        this.areaBlur()
        return callback()
      }
    }
    const validateEnd = (rule, value, callback) => {
      if (!!value) {
        // 1-1000的正則
        const numReg = /^(?!00)(?:[0-9]{1,3}|1000)$/
        if (!numReg.test(value)) {
          this.ruleForm.areaRules[1] = 1
          this.areaBlur()
          return callback()
        }
        if (numReg.test(value)) {
          this.ruleForm.areaRules[1] = 2
          this.areaBlur()
          return callback()
        }
        this.ruleForm.areaRules[1] = 0
        this.areaBlur()
        callback()
      } else {
        this.ruleForm.areaRules[1] = -1
        this.areaBlur()
        return callback()
      }
    }
    // areaRules內(nèi)值的含義：-1 提醒不能為空 0則表示正常 其他值為格式錯誤
    const validateArea = (rule, value, callback) => {
      if (this.ruleForm.areaRules.includes(-1)) {
        return callback(new Error('范圍不能為空'))
      }
      if (this.ruleForm.areaRules[0] !== this.ruleForm.areaRules[1] || this.ruleForm.areaRules[0] === 1 || this.ruleForm.areaRules[1] === 1) {
        return callback(new Error('格式錯誤'))
      }
      if (this.ruleForm.start > this.ruleForm.end) {
        return callback(new Error('起始序號不能大于截止序號'))
      }
      callback()
    }
    return {
      ruleForm: {
        start: '',
        end: '',
        areaRules: [-1, -1]
      },
      rules: {
        start: [{ type: 'string', required: true, validator: validateStart, trigger: 'blur' }],
        end: [{ type: 'string', required: true, validator: validateEnd, trigger: 'blur' }],
        area: [{ type: 'array', required: true, validator: validateArea, trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 手動觸發(fā)最外層form-item的正則驗(yàn)證
    areaBlur() {
      this.$refs['ruleForm'].validateField('area')
    }
  }
}
</script>

效果：