Agent Skills
返回列表
Yup对象校验

Yup对象校验

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_f1b049da/fst20266835

技能介绍

解决什么问题

在 Element Plus 生态下处理复杂嵌套表单时，开发者常面临两类问题：一是校验逻辑分散在组件各处，难以维护；二是嵌套结构（如联系人数组、地址对象）的校验规则难以统一管理。此外，团队可能同时引入 Zod，导致同一表单出现两套校验体系。

核心能力与实现步骤

本技能基于 yup 库，采用声明式 schema 加 validate 的方式集中管理校验规则：

  • 使用 yup.object 与 yup.array 构建嵌套结构，schema 即文档
  • 提交时调用 validate(data, { abortEarly: false }) 一次性收集所有错误，而非遇到第一个错误就中断
  • 错误信息可转换为 Element Plus 的 rules 或字段映射，直接填入表单项
  • 可选使用 yup.reach 对单个字段做失焦校验，提升交互体验

Agent 执行时按以下步骤推进：先编写 schema，再在提交流程中接入 validateCustomer 并将 fieldErrors 回填到表单，必要时对失焦字段做单点校验，最后覆盖必填、手机号格式、嵌套地址三类用例自测。

适用边界与注意点

  • schema 内不要承载审批流等重业务逻辑，它只负责数据形状与约束
  • 远程校验（如重名检查）默认不要开启，否则每次输入都会触发请求拖垮体验
  • 若已引入 Zod，同一表单不要同时绑定两套校验栈
  • 异步校验必须防抖且失败可降级，避免用户卡在提交流程
  • 错误文案统一使用中文，label 采用业务字段名

使用场景

  • 前端正在开发 Element Plus 中的联系人列表或嵌套地址结构，需要集中管理校验规则。
  • 提交表单时想一次性收集所有字段的错误信息，而不是遇到第一个错误就提示。
  • 实现异步校验（如用户名查重）时，需要先添加防抖与失败降级处理。
  • 团队已经引入 Zod，现在要确认是否某个表单适合切换到 Yup 来统一校验风格。

适合人员

  • 前端工程师，负责在 Element Plus 复杂嵌套表单中用 Yup 集中管理校验规则。
  • AI 编程 Agent，需要按声明式 schema 在提交流程里做错误收集与表单回填。
  • 开源维护者，正在统一团队内部 Yup 与 Zod 的选型策略，避免同一表单双栈。
  • 普通 Web 应用开发者，需要根据布尔值开关来动态控制必填项。