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

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

Vorms 是什么？

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

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

為什么選擇 Vorms？

• 強類型支持：Vorms 使用 TypeScript 編寫，提供 TSDoc 標(biāo)注，即使你用 JavaScript 開發(fā)，也能享受智能提示和類型檢查，提升開發(fā)效率。
• 輕量化設(shè)計：Vorms 壓縮后僅 4KB，支持 Tree-shaking，不會給項目增加負(fù)擔(dān)，性能無憂。
• 簡單易用： 基于 Vue 3 的 Composition API，Vorms 的 API 設(shè)計簡潔明了，新手也能快速上手。
• 高度靈活： 支持 Yup、Zod 等主流驗證庫，還能自定義驗證規(guī)則，輕松應(yīng)對各種復(fù)雜場景。

如何使用 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('提交數(shù)據(jù)：', 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 的設(shè)計理念汲取了眾多優(yōu)秀開源項目的精華，并在此基礎(chǔ)上進(jìn)行了創(chuàng)新融合。例如：

• Formik：作為 React 生態(tài)中備受推崇的表單庫，其強大的功能和靈活的擴展性給了 Vorms 很多啟發(fā)。
• React Hook Form：憑借簡化 React 表單開發(fā)流程的特性，在前端開發(fā)領(lǐng)域贏得了廣泛贊譽，Vorms 也從中汲取了簡化的思想精髓。
• VeeValidate：為 Vue 開發(fā)者提供了強大且便捷的表單驗證功能，其對 Vue 生態(tài)系統(tǒng)的深度適配和良好的用戶體驗，為 Vorms 的設(shè)計提供了重要參考。

在這些優(yōu)秀開源項目的啟發(fā)下，Vorms 緊密結(jié)合 Vue 3 的 Composition API，為開發(fā)者們帶來了更為優(yōu)雅、靈活且高效能的表單處理方式。