尤雨溪推荐！Vue 3 表单验证神器 @vorms/core - 极简API，强大功能 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

尤雨溪推荐 | 专为 Vue 3 设计的轻量级表单验证解决方案

简介

@vorms/core 是一个专为 Vue 3 设计的表单验证库，由 Vue.js 核心团队成员推荐。它采用 Composition API 设计，提供极简的 API 和强大的验证能力，让表单验证变得简单而优雅。

核心特性

尤雨溪推荐：Vue.js 核心团队认可的表单验证解决方案
极简 API：最少的代码实现最强大的功能
Composition API 原生支持：完美契合 Vue 3 设计理念
同步异步验证：支持同步验证和异步 API 验证
TypeScript 支持：完整的类型定义，开发体验更佳
零依赖：轻量级设计，不影响应用性能
高性能：优化的验证机制，响应迅速

安装

npm install @vorms/core
# 或者
yarn add @vorms/core
# 或者
pnpm add @vorms/core

快速开始

基础用法

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
    <div class="w-full max-w-md">
      <form
        @submit="handleSubmit"
        class="bg-white shadow-lg rounded-lg p-8 space-y-6"
      >
        <h2 class="text-2xl font-bold text-gray-800 text-center mb-8">
          用户信息
        </h2>

        <div class="space-y-2">
          <input
            v-model="username"
            type="text"
            placeholder="用户名"
            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition-all duration-200 bg-white text-gray-800 placeholder-gray-500"
          />
          <span v-if="errors.username" class="text-red-500 text-sm block mt-1">
            {{ errors.username }}
          </span>
        </div>

        <div class="space-y-2">
          <input
            v-model="email"
            placeholder="邮箱"
            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition-all duration-200 bg-white text-gray-800 placeholder-gray-500"
          />
          <span v-if="errors.email" class="text-red-500 text-sm block mt-1">
            {{ errors.email }}
          </span>
        </div>

        <button
          type="submit"
          class="w-full bg-gray-800 hover:bg-gray-900 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 outline-none"
        >
          提交
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { useForm } from "@vorms/core";

const { errors, handleSubmit, register } = useForm({
  initialValues: {
    username: "",
    email: "",
  },
  validate(values) {
    const errors = {};

    if (!values.username) {
      errors.username = "用户名不能为空";
    } else if (values.username.length < 2) {
      errors.username = "用户名至少需要2个字符";
    }

    if (!values.email) {
      errors.email = "邮箱不能为空";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
      errors.email = "邮箱格式不正确";
    }

    return errors;
  },
});

const { value: username } = register("username");
const { value: email } = register("email");
</script>

验证方式

同步验证

const { errors, handleSubmit, register } = useForm({
  initialValues: {
    username: "",
  },
  validate(values) {
    const errors = {};

    if (!values.username) {
      errors.username = "用户名不能为空";
    }

    return errors;
  },
});

异步验证

支持 API 调用进行远程验证：

const { errors, handleSubmit, register } = useForm({
  initialValues: {
    username: "",
  },
  validate(values) {
    return new Promise((resolve) => {
      // 模拟 API 调用
      setTimeout(() => {
        const errors = {};

        if (!values.username) {
          errors.username = "用户名不能为空";
        }

        resolve(errors);
      }, 300);
    });
  },
});

API 参考

useForm

表单验证的核心 Hook。

interface UseFormOptions {
  initialValues: Values;
  initialErrors?: FormErrors<Values>;
  initialTouched?: FormTouched<Values>;
  validateMode?: ValidateMode;
  reValidateMode?: ValidateMode;
  validateOnMounted?: boolean;
  onSubmit: (
    values: Values,
    helper: FormSubmitHelper<Values>
  ) => void | Promise<any>;
  onInvalid?: (errors: FormErrors<Values>) => void;
  validate?: (values: Values) => void | object | Promise<FormErrors<Values>>;
}

const { errors, handleSubmit, register, resetForm } = useForm(options: UseFormOptions);

useField

单个字段验证 Hook，提供更精细的控制。

<script setup lang="ts">
import { useField, useForm } from "@vorms/core";

const { handleSubmit } = useForm({
  initialValues: {
    name: "",
  },
  validate(values) {
    const errors: Record<string, string> = {};

    if (!values.name) {
      errors.name = "姓名不能为空";
    }

    return errors;
  },
  onSubmit(values) {
    console.log({ values });
  },
});

const { value: name, attrs: nameAttrs, error: nameError } = useField("name");
</script>

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
    <div class="w-full max-w-md">
      <form
        v-on:submit="handleSubmit"
        class="bg-white shadow-lg rounded-lg p-8 space-y-6"
      >
        <h2 class="text-2xl font-bold text-gray-800 text-center mb-8">
          用户信息
        </h2>

        <div class="space-y-2">
          <input
            v-model="name"
            type="text"
            v-bind="nameAttrs"
            placeholder="请输入姓名"
            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition-all duration-200 bg-white text-gray-800 placeholder-gray-500"
          />
          <span v-if="nameError" class="text-red-500 text-sm block mt-1">
            {{ nameError }}
          </span>
        </div>

        <button
          type="submit"
          class="w-full bg-gray-800 hover:bg-gray-900 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 outline-none"
        >
          提交
        </button>
      </form>
    </div>
  </div>
</template>

useFieldArray

动态表单字段管理。

<script setup>
import { useForm, useFieldArray } from "@vorms/core";

const { handleSubmit, errors } = useForm({
  initialValues: {
    users: ["张三", "李四", "王五"],
  },
  validate(values) {
    const errors = {};

    if (!values.users || values.users.length === 0) {
      errors.users = "至少需要一个用户";
    } else {
      values.users.forEach((user, index) => {
        if (!user || user.trim() === "") {
          errors[`users.${index}`] = "用户名不能为空";
        }
      });
    }

    return errors;
  },
  onSubmit(data) {
    console.log(data);
  },
});

const { fields, append } = useFieldArray("users");
</script>

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
    <div class="w-full max-w-md">
      <form
        @submit="handleSubmit"
        class="bg-white shadow-lg rounded-lg p-8 space-y-6"
      >
        <h2 class="text-2xl font-bold text-gray-800 text-center mb-8">
          用户列表
        </h2>

        <div class="space-y-4">
          <div
            v-for="(field, index) in fields"
            :key="field.key"
            class="space-y-2"
          >
            <div class="flex items-center space-x-3">
              <input
                v-model="field.value"
                type="text"
                :name="field.name"
                v-bind="field.attrs"
                class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition-all duration-200 bg-white text-gray-800 placeholder-gray-500"
                placeholder="请输入姓名"
              />
            </div>
            <span
              v-if="errors[`users.${index}`]"
              class="text-red-500 text-sm block"
            >
              {{ errors[`users.${index}`] }}
            </span>
          </div>
        </div>

        <div class="flex space-x-3">
          <button
            type="button"
            @click="append('')"
            class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-6 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 outline-none"
          >
            添加
          </button>
          <button
            type="submit"
            class="flex-1 bg-gray-800 hover:bg-gray-900 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 outline-none"
          >
            提交
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

总结

@vorms/core 是 Vue 3 生态中备受推荐的表单验证解决方案。它以极简的 API 设计为核心，提供强大的验证能力，让开发者能够专注于业务逻辑而非复杂的表单处理。

为什么选择 @vorms/core？

✅ 尤雨溪及 Vue 核心团队推荐
✅ 极简的 API 设计，学习成本低
✅ 完美的 TypeScript 支持
✅ 零依赖，轻量级
✅ 高性能，响应迅速

立即开始使用，体验 Vue 3 表单验证的最佳实践。

原文链接：https://code.ifrontend.net/archives/1188，转载请注明出处。

尤雨溪推荐！Vue 3 表单验证神器 @vorms/core – 极简API，强大功能

简介

核心特性

安装

快速开始

基础用法

验证方式

同步验证

异步验证

API 参考

useForm

useField

useFieldArray

总结

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

尤雨溪推荐！Vue 3 表单验证神器 @vorms/core – 极简API，强大功能

简介

核心特性

安装

快速开始

基础用法

验证方式

同步验证

异步验证

API 参考

useForm

useField

useFieldArray

总结

猜你喜欢

Tailwind CSS v4 终极指南：体验 Rust 驱动的闪电般性能与现代化 CSS 工作流

Vue 3 实战：从零到一用 vue-pdf-embed 打造功能齐全的 PDF 查看器

再见 Tailwind，你好 UnoCSS！快 200 倍的下一代原子化 CSS 引擎来了

前端仔告别后端！Vue 3 轻松搞定 Excel 导入导出，同事都惊呆了！

VeeValidate v4 终极指南：精通 Vue 3 组合式 API 表单验证

Vue 3 二维码扫描终极指南：轻松集成 html5-qrcode，让你的应用“码”力全开！

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部