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

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

Vorms 是什么？

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

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

為什么選擇 Vorms？

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

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

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

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