element-ui 和 element-plus 表单校验 validateField 的差异

最近项目 Vue 2 升级到 Vue 3，element-ui 换成 element-plus 时发现表单检验的 validateField 方法变化很大：

element-ui

this.$refs.ruleForm.validateField('username', msg => {
  if (!msg) {
    // 校验通过
  } else {
    // 校验不通过
  }
})

在 element-ui 中，callback 的第一个参数是校验结果的提示信息，类型是 string

• msg 为空字符串代表校验通过

• msg 不为空代表校验不通过

element-plus

formRef.value.validateField('username', valid => {
  if (valid) {
    // 校验通过
  } else {
    // 校验不通过
  }
})

而在 element-plus 中，callback 的第一个参数就变成了校验是否通过的 boolean 值

more

callback 的方式挺不好用的，封装成 await Promise 形式：

const pass = await new Promise(resolve => {
  formRef.value.validateField('username', valid => {
    resolve(valid)
  })
})

if (pass) {
  // 校验通过
}