在前端開發中，表單驗證一直是個讓人頭疼的問題。但今天要給大家介紹一個尤雨溪都點贊的表單驗證工具 —— Vorms。

它只有 12KB，曾獲得尤雨溪的強烈推薦，絕對是 Vue 3 開發者的福音！

Vorms 是什么？

Vorms 是一個基于 Vue 3 的表單驗證庫，采用 Composition API 構建，輕量、靈活，讓你用最少的代碼實現最強的功能。

它不僅體積小，而且支持多種驗證器，滿足各種復雜需求。

為什么選擇 Vorms？

• 強類型支持：Vorms 使用 TypeScript 編寫，提供 TSDoc 標注，即使你用 JavaScript 開發，也能享受智能提示和類型檢查，提升開發效率。
• 輕量化設計：Vorms 壓縮后僅 4KB，支持 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>Email</label>
<input v-model="email" v-bind="emailAttrs" />

<label>Password</label>
<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，為開發者們帶來了更為優雅、靈活且高效能的表單處理方式。