Vue中使用async-validator进行group校验的一种实现方式

在项目开发中会遇到这样的一种情况： 存在两个输入框： 及格的人数和不及格的人数，两个数值之和不能大于班级的总人数。假设班级总人数为50。我们首先输入几个人数为25。再输入不及格人数为26。这时，不及格人数的输入框的出现错误提示。之后经过何对，发现是及格人数输入错误。用户直接修改及格人数的值为24，但是不及格人数的输入框仍然存在错误提示。这时，我们需要在修改了及格人数之后同时校验及格人数的值和不及格人数的值

data () {
  const passValidator = (rule, value, callback) => {
    const val = value || 0
    if (val < 0) {
      callback('请输入及格人数')
    } else if ((pass || 0) + (fail || 0) > total) {
      callback('人数超过班级人数上限')
    } else {
      callback()
    }
  }
  const failValidator = (rule, value, callback) => {
    const val = value || 0
    if (val < 0) {
      callback('请输入不及格人数')
    } else if ((pass || 0) + (fail || 0) > total) {
      callback('人数超过班级人数上限')
    } else {
      callback()
    }
  }
  const passGroupValidator = (rule, value, callback) => {
    this.$refs.form.validateField('fail')
    return true
  }
  const failGroupValidator = (rule, value, callback) => {
    this.$refs.form.validateField('pass')
    return true
  }

  return {
    pass: 0,
    fail： 0,
    total: 50,
    rules： {
      pass: [
        { required: true, validator: passValidator, trigger: change},
        { required: true, validator: passGroupValidator, trigger: 'change' }
      ],
      fail: [
        { required: true, validator: failValidator, trigger: change},
        { required: true, validator: failGroupValidator, trigger: 'change' }
      ]
    }
  }
}