写一个输入框校验类，链式实现表单校验

// 数据校验类
export class ValidateClass {
  constructor (input, label) {
    this._input = input
    this._label = label
    this.errorMessage = '通过校验' // 错误信息
    this.pass = true // 校验是否通过
  }

  // 数据输入
  data (input) {
    if (!this.pass) return this
    this._input = input
    return this
  }

  // 标识符输入
  key (key) {
    if (!this.pass) return this
    this._key = key
    return this
  }

  // 标题输入
  label (label) {
    if (!this.pass) return this
    this._label = label
    return this
  }

  // 必填，不能为空
  isRequired (message) {
    if (!this.pass) return this
    if (
      /^\s*$/g.test(this._input) ||
      this._input === null ||
      this._input === undefined
    ) {
      this.errorMessage = this._label ? this._label + message : message
      this.pass = false
    }
    return this
  }

  // 允许最小数值
  minNumber (min, message) {
    if (!this.pass) return this
    if (+(this._input) < min) {
      this.errorMessage = this._label ? this._label + message : message
      this.pass = false
    }
    return this
  }

  // 最小长度
  minLength (length, message) {
    if (!this.pass) return this
    if (this._input.length < length) {
      this.errorMessage = this._label ? this._label + message : message
      this.pass = false
    }
    return this
  }

  // 允许最大数值
  maxNumber (max, message) {
    if (!this.pass) return this
    if (+(this._input) > max) {
      this.errorMessage = this._label ? this._label + message : message
      this.pass = false
    }
    return this
  }

  // 最大长度
  maxLength (length, message) {
    if (!this.pass) return this
    if (this._input.length > length) {
      this.errorMessage = this._label ? this._label + message : message
      this.pass = false
    }
    return this
  }

  // 手机号校验
  isPhone (message) {
    if (!this.pass) return this
    const phoneReg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
    if (!phoneReg.test(this._input)) {
      this.errorMessage = this._label ? this._label + message : message
      this.pass = false
    }
    return this
  }

  // 自定义正则校验
  requireRegexp (reg, message) {
    if (!this.pass) return this
    if (!reg.test(this._input)) {
      this.errorMessage = this._label ? this._label + message : message
      this.pass = false
    }
    return this
  }
}

使用时

<div class="input-box">
  <van-field class="my-input" v-model="inputVal" type="number" :placeholder="placeholder" :input-align="inputAlign" :maxlength="maxlength" :readonly="readonly" @blur="handleValidate" @keyup.native="inputVal = inputVal.replace(/[^\.\d]/g, '')" />
  <van-icon v-if="inputVal" name="clear" @click="clearValue" :class="unit ? '' : 'computed-position'" />
</div>
<p v-if="errorTip" class="error-tip" :style="{'margin-bottom': isMultiple ? '10px' : ''}">{{ errorTip }}</p>

handleValidate () {
  const reg = /^0+$/g // 以0开头多个0并且以0结尾
  if (!reg.test(this.inputVal)) {
    this.inputVal = this.inputVal.replace(/^0+/g, '') // 如果两位以上的数字第一位是0，则替换成''
  } else {
    this.inputVal = this.inputVal.replace(/^0+/g, '0')
  }
  if (this.inputVal) {
    this.errorTip = ''
    this.inputVal = this.numberCheck(this.inputVal) // 小数点后只允许输入一位
    const cValidate = new ValidateClass(+this.inputVal) // 引入校验类
    cValidate
      .minNumber(this.range[0], this.minTip)
      .maxNumber(this.range[1], this.maxTip)
    if (!cValidate.pass) {
      this.errorTip = cValidate.errorMessage // 错误提示
    } else {
      this.errorTip = ''
    }
  } else {
    this.errorTip = this.requireTip
  }
},