二次封装Element-ui的form表单validateFieldSync一次性校验部分字段

继我关于二次封装el-form新增校验错误自动滚动到错误表单项位置后封装的组件。我在实际开发中又遇到了validateField使用中，传入的props每个prop都会触发传入的callback，实际我的需求是要验证完了最后给我个结果。我不得不用个数组来接受每次的结果。如：

const list = []
this.$refs.formRef.validateField(['prop1','prop2'], (msg) => {
  if (msg) {
    list.push(msg)
  }
})
if (!list.length) {
  // 校验通过发起请求
}

既然都二次封装了，那我就在添加个validateFieldSync方法，支持跟validate一样的使用方式。

validateFieldSync(props, callback) {
  let promise
  if (typeof callback !== 'function' && window.Promise) {
    promise = new window.Promise((resolve, reject) => {
      callback = function(valid, invalidFields) {
        if (valid) {
          resolve(valid)
        } else {
          reject(invalidFields)
        }
      }
    })
  }
  Promise.all(props.map(prop => {
    return new Promise((resolve, reject) => {
      this.validateField([prop], (errMsg) => {
        if (errMsg) {
          reject(errMsg)
        } else {
          resolve()
        }
      })
    })
  })).then(() => {
    callback(true)
  }).catch(invalidFields => {
    callback(false, invalidFields)
  })
  return promise
},

使用起来就方便多了

this.$refs.formRef.validateFieldSync(['prop1','prop2'], (valid) => {
  if (valid) {
  // 校验通过发起请求
  }
})

或者

this.$refs.formRef.validateFieldSync(['prop1','prop2']).then(() => {
    // 校验通过发起请求
})