需求：vue3结合naiveui的表单规则写法（回调）

const rules = {
  roleId: {
    key: "edit",//区别规则
    required: true,
    trigger: ["blur", "input"],
    validator(rule: FormItemRule, value: Number) {
      if (value === null) { return new Error("请选择角色") }
    },
  },
  email: [
    {
      key: "edit",
      required: true,
      trigger: ["blur", "change"],
      message: "请输入邮箱",
    },
    {
      pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      message: "请输入正确格式的邮箱",
      trigger: ["input", "blur"],
    },
  ],
  phone: {
    key: "edit",
    pattern: /^[1][3456789]\d{9}$/,
    message: "请输入正确格式的手机号",
    trigger: ["input", "blur"],
  },
  password: [
    {
      required: true,
      trigger: ["blur", "input"],
      message: "请输入密码",
    },
    {
      trigger: ["blur", "change"],
      pattern: /^(?=^.*?[a-z])(?=^.*?\d).{6,32}$/,
      message: "请输入6-32位包含字母和数字的密码",
    },
  ],
  passwordDb: [
    {
      required: true,
      trigger: ["blur", "input"],
      message: "请再次输入密码",
    },
    {
      trigger: ["blur", "input"],
      validator(rule: FormItemRule, value: string) {
        if (props.editForm.password !== value) {
          return new Error("两次密码输入不一致")
        }
      },
    },
  ],
}

 

const submit = () => {
//editForm.index 判断是编辑还是新增
  if (editForm.index == -1) {
    editFormRef.value?.validate(async (errors) => {
      if (!errors) {
        message.success("添加成功")
        close()
      }
    })
  } else {
    editFormRef.value?.validate(
      async (errors) => {
        if (!errors) {
          message.success("编辑成功")
          close()
        }
      },
    //根据key可以自动识别需要的表单规则去验证
      (rule) => {
        return rule?.key === "edit"
      }
    )
  }
}