背景

ele-ui使用表单验证，需要调用接口判断是否是重名，重名则停留在当前页，否则就进行到下一页。

存在问题

使用普通的validate

  rules: {
        name: [
          { required: true, trigger: ['blur', 'change'], message: '名称不能为空' },
          { min: 1, max: 32, trigger: ['blur', 'change'], message: '名称最小长度1，最大长度32！' },
          { pattern: /^(?=[a-z])([a-z0-9-]{0,31})([a-z0-9])$/, trigger: ['blur', 'change'], message: '名称格式错误' },
          {
            validator: (rule, value1, callback) => {
              let param = {
                name: value1
              }
              request('/url', 'GET', param).then((res) => {
                if (res.resultCode === 200) {
                  callback(new Error('名称重复！'))
                } else {
                  callback()
                }
              })
            },
            trigger: 'blur'
          }
        ]}

校验代码

 this.$refs.form.validate((valid) => {
   if (!valid) {
     isError = true
  }
})

运行时，失焦状态下可以报错，但是点击下一步，则会直接跳转；

打了断点看，下一步的操作已经执行，但是校验还没有返回；

解决方法

使用async await完美解决

async validateForm () {
  let valid = await this.$refs.form.validate().catch((err) => {
    return err
  })
  return valid
},
isError = this.validateForm()

则可以完美解决