使用element UI 验证时vaild总是false

记录一下

前面是一个element ui自定义表单验证规则，就是向后端发ajax请求，验证旧密码正不正确
后面：

// axios请求，修改密码
const { status, message } = await changePassword(parmas)
// 表单验证以及后续处理
this.$refs.form.validate(valid => {
  if (valid && status == 0) {
  	// 验证通过且修改成功
    this.$message.success(message)
    localStorage.removeItem('userInfo')
    this.$router.replace('/login')
  } else {
    this.$message.error(message)
  }
})

这么写是有问题的，首先，在执行validate函数时，是会再次进行一次表单验证的，这时候，先发送ajax请求，修改了密码之后再次执行validate函数，再次执行自定义的验证规则发ajax验证账号密码，因为先发了ajax请求，密码被改了，所以验证旧失败了，valid就是false。应该先验证valid，再发修改密码的请求。

this.$refs.form.validate(async vaild => {
 if (vaild) {
 	// 验证通过再发请求
   const { status, message } = await changePassword(parmas)
   if (status == 0) {
     this.$message.success(message)
     localStorage.removeItem('userInfo')
     this.$router.replace('/login')
   } else {
     this.$message.error(message)
   }
 }
})

这样就没问题了。坑了我一个多小时。。。