Valibot表单校验

为什么需要这个技能

表单校验容易写成三种烂摊子：要么在提交按钮里散落一堆 if (!phone) return '手机号必填'，要么为了一个 CRM 客户表单拉进整套 Yup/Zod 全家桶，要么把服务端私有规则硬编码进模板。实际项目里往往只需要一个可组合、能按需导入的轻量 schema，以及一套能把错误按字段回填的流程。

技能如何工作

技能围绕 Valibot 展开，用 object 组合字段，用 pipe 挂上具体校验规则。核心步骤包括：

• 用 npm i valibot 安装依赖，但插件本身不包含安装命令；
• 提交前调用 safeParse，避免 parse 抛异常打断主流程；
• 失败后把 errors 写入 el-form 等表单组件的字段 key；
• 动态 schema 用 v.object 组合，而不是复制粘贴多套常量。

适用边界与注意点

它不替代长篇的 Zod/Yup 迁移指南，只提供 CRM 表单落地模板。适合以下场景：新建客户时校验姓名/手机/邮箱，想减包体积而试轻量方案，或做 Demo 工具箱的本地校验。

不要在同一站点同时绑死 Zod + Yup + Valibot 三套校验栈；不要把完整服务端密钥或私有业务规则硬编码进技能。手机号先用国内 11 位轻量正则即可，复杂号段可接已有运营商 Skill。选型时写清楚：体积优先 Valibot，生态与习惯优先 Zod。