来源丨经授权转自 前端开发爱好者（ID：web_share_）
在前端开发中，表单验证一直是个让人头疼的问题。但今天要给大家介绍一个
尤雨溪
都点赞的表单验证工具 ——
Vorms
。它只有
12KB
，曾获得
尤雨溪
的强烈推荐，绝对是
Vue 3
开发者的福音！
Vorms 是什么？
Vorms
是一个基于
Vue 3
的表单验证库，采用
Composition API
构建，轻量、灵活，让你用最少的代码实现最强的功能。
它不仅体积小，而且支持多种验证器，满足各种复杂需求。
为什么选择 Vorms？
-
强类型支持
：Vorms 使用 TypeScript 编写，提供 TSDoc 标注，即使你用 JavaScript 开发，也能享受智能提示和类型检查，提升开发效率。
-
轻量化设计
：Vorms 压缩后仅 12KB，支持 Tree-shaking，不会给项目增加负担，性能无忧。
-
简单易用
：基于 Vue 3 的 Composition API，Vorms 的 API 设计简洁明了，新手也能快速上手。
-
高度灵活
：支持 Yup、Zod 等主流验证库，还能自定义验证规则，轻松应对各种复杂场景。
如何使用 Vorms？
安装 Vorms 只需一条命令：
npm install @vorms/core
使用示例：
<script setup lang="ts">
import { useForm } from '@vorms/core';
const { register, handleSubmit } = useForm({
initialValues: { email: '', password: '' },
onSubmit(data) { console.log('提交数据：', data); },
});
const { value: email, attrs: emailAttrs } = register('email');
const { value: password, attrs: passwordAttrs } = register('password');
script>
<template>
<form @submit="handleSubmit">
<label>Emaillabel>
<input v-model="email" v-bind="emailAttrs" />
<label>Passwordlabel>
<input v-model="password" v-bind="passwordAttrs" />
<button type="submit">提交button>
form>
template>
Vorms 的灵感之源
Vorms 的设计理念汲取了众多优秀开源项目的精华，并在此基础上进行了创新融合。例如：
-
Formik
：作为 React 生态中备受推崇的表单库，其强大的功能和灵活的扩展性给了 Vorms 很多启发。
-
React Hook Form
：凭借简化 React 表单开发流程的特性，在前端开发领域赢得了广泛赞誉，Vorms 也从中汲取了简化的思想精髓。
-
VeeValidate
：为 Vue 开发者提供了强大且便捷的表单验证功能，其对 Vue 生态系统的深度适配和良好的用户体验，为 Vorms 的设计提供了重要参考。
在这些优秀开源项目的启发下，Vorms 紧密结合
Vue 3
的
Composition API
，为开发者们带来了更为优雅、灵活且高效能的表单处理方式。
