element-plus表单校验成功时不走validate函数的回调踩坑记录

原因：校验规则格式不对，错误的校验规则：

const validatName = (rule: any, value: any, callback: any) => {
  if (!value.trim()) {
    callback(new Error('用户名是必填项~'))
  } else if (value) {  
    const pattern = /^[0-9a-z]{5-10}$/
    if (!pattern.test(value)) {
      callback(new Error('用户名必须是5-10位的字母或者数字~'))
    }
  } else {  这里写错，校验成功时根本不会执行else语句里的代码
    callback()
  }
}

看了官网之后调整如下：

const validatName = (rule: any, value: any, callback: any) => {
  if (!value.trim()) {
    callback(new Error('用户名是必填项~'))
  } else {
    const pattern = /^[0-9a-z]{5-10}$/
    if (!pattern.test(value)) {
      callback(new Error('用户名必须是5-10位的字母或者数字~'))
    } else {
      callback()
    }
  }
}

成功