2025element-plus使用表单自定义校验规则ts检查报错

今天写element-plus的自定义校验过程时，发现ts校验会有点问题

//定义表单校验规则对象
const rules = {
  //规则对象属性
  // required:字段必须校验
  // min:文本长度至少多少位
  // max:文本长度至多多少位
  // message:错误提示信息
  // trigger:触发表单校验时机 change->文本发生改变,blur- >失去焦点
  username: [
    { required: true, message: '请输入用户名/邮箱地址', trigger: 'blur' },
    { trigger: 'change', validator: validatorUserName },
  ],
  password: [
    { required: true, message: '密码不能少于6位', min: 6, trigger: 'blur' },
    { trigger: 'change', validator: validatorPassword },
  ],
}

自定义validator的校验回调函数

const validatorUserName = (rule: any,value: any, callback: any) => {
  // rule:校验规则对象
  // value:表单元素文本内容
  // callback:符合条件放行,不符合注入错误信息
  setTimeout(() => {
    if (
      /^[a-zA-Z0-9]+$|^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
        value,
      )
    ) {
      // 校验包含字母或数字和邮箱的正则表达式
      callback()
    } else {
      callback(new Error('用户名或邮箱格式有误,请修改'))
    }
  }, 1000)
}

发现官方示例的方法中并没有调用参数中的rule变量，但是直接删除rule时，注入的返回错误信息会消失，

但是ts还是报错，这里选择手动添加忽略注解

// @ts-ignore