大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 Valibot

Validate unknown data with Valibot, the open source schema library with bundle size, type safety and developer experience in mind.

Valibot 可以用于帮助开发者使用 schema 轻松验证数据，无论是服务器上的传入数据、表单还是配置文件。Valibot 没有任何依赖项，可以在任何 JavaScript 环境中运行。

Valibot 的典型特征包括：

完全类型安全，具有静态类型推断小包大小，起始小于 600 字节验证从字符串到复杂对象的所有内容开源且经过全面测试，覆盖率 100%包含许多转换和验证操作、结构良好的源代码，无依赖关系最小、可读且经过深思熟虑的 API

Valibot 的 API 设计和源代码都是基于许多小型且独立的函数，每个函数只执行一项任务，这种模块化设计有几个优点，比如：允许捆绑器使用 import 语句删除不需要的代码，与 Zod 相比可以将捆绑包大小减少高达 95%。

目前 Valibot 在 Github 通过 MIT 协议开源，有超过 5.6k 的 star、是一个值得关注的前端开源项目。

如何使用 Valibot

对于 Node 和 Bun，可以通过最喜欢的包管理器使用单个命令将 Valibot 添加到项目中。

npm install valibot # npmyarn add valibot # yarnpnpm add valibot # pnpmbun add valibot # bun

之后，开发者可以将 Valibot 导入到任何 JavaScript 或 TypeScript 文件中。

// With individual importsimport {…} from 'valibot';// With a wildcard importimport * as v from 'valibot';

与在 TypeScript 中定义类型类似，Valibot 源代码允许开发者使用各种小函数定义模式，其适用于字符串等原始值以及对象等更复杂的数据集。

import * as v from 'valibot';// TypeScripttype LoginData = { email: string; password: string;};// Valibotconst LoginSchema = v.object({ email: v.string(), password: v.string(),});

此外，Valibot 还支持使用管道方法执行更详细的验证和转换：

import * as v from 'valibot';const EmailSchema = v.pipe(v.string(), v.email(), v.endsWith('@example.com'));

如果在验证过程中检测到问题，Valibot 会创建一个包含各种详细信息和错误消息的特定问题对象。可以通过模式或验证操作的第一个可选参数覆盖此错误消息。

import * as v from 'valibot';const LoginSchema = v.object({ email: v.pipe( v.string('Your email must be a string.'), v.nonEmpty('Please enter your email.'), v.email('The email address is badly formatted.') ), password: v.pipe( v.string('Your password must be a string.'), v.nonEmpty('Please enter your password.'), v.minLength(8, 'Your password must have 8 characters or more.') ),});

最后，开发者可以使用 schema 来推断其输入和输出类型并解析未知数据。这样，schema 就是唯一的事实来源。这个概念简化了开发过程，并使代码从长远来看更加健壮。

import * as v from 'valibot';const LoginSchema = v.object({…});type LoginData = v.InferOutput<typeof LoginSchema>;function getLoginData(data: unknown): LoginData { return v.parse(LoginSchema, data);}

更多关于 Valibot 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/fabian-hiller/valibot

https://valibot.dev/guides/quick-start/

https://valibot.dev/

https://blog.logrocket.com/validating-structural-data-valibot/

https://www.linkedin.cn/incareer/home