无痛苦的 Vue 表单

特性

• 🍞 简单： 声明式验证，熟悉且易于配置
• 🧘‍♀️ 灵活： 支持同步、异步、字段级或表单级验证
• ⚡️ 快速： 通过直观的 API 和极小的体积，更快地构建表单
• 🏏 极简： 仅处理复杂的表单问题，其余部分完全由你掌控
• 😎 UI 无关： 兼容原生 HTML 元素或你喜欢的 UI 库组件
• 🦾 渐进式： 无论你将 Vue.js 用作渐进式增强还是复杂架构，均可正常工作
• ✅ 内置规则： 配套库提供 25+ 条规则，覆盖大多数 Web 应用的大部分需求
• 🌐 i18n： 45+ 种内置规则语言包，由来自世界各地的开发者贡献

快速开始

安装

# Install with yarn
yarn add vee-validate

# Install with npm
npm install vee-validate --save

Vue 版本支持

主 v4 版本仅支持 Vue 3.x，对于 Vue 的早期版本，请查看下表

vue 版本	vee-validate 版本	文档链接
2.x	2.x 或 3.x	v2 或 v3
3.x	4.x 或 5.x	v4 或 v5

用法

vee-validate 提供两种风格，将表单验证集成到 Vue.js 应用中。

Composition API

使用 Composition API 是创建表单并管理其验证、行为和值的最快方式。

使用 useForm 创建表单，然后使用 defineField 创建字段模型和 props/属性，并使用 handleSubmit 使用这些值并将其发送到 API。

<script setup>
import { useForm } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Create the form
const { defineField, handleSubmit, errors } = useForm({
  validationSchema: {
    field: required,
  },
});

// Define fields
const [field, fieldProps] = defineField('field');

// Submit handler
const onSubmit = handleSubmit(values => {
  // Submit to API
  console.log(values);
});
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="field" v-bind="fieldProps" />
    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </form>
</template>

你可以做到更多，更多信息请查阅组合式 API 文档。

声明式组件

高阶组件也可用于构建表单。注册 Field 和 Form 组件，并创建一个简单的 required 验证器：

<script setup>
import { Field, Form } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Submit handler
function onSubmit(values) {
  // Submit to API
  console.log(values);
}
</script>

<template>
  <Form v-slot="{ errors }" @submit="onSubmit">
    <Field name="field" :rules="required" />

    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </Form>
</template>

Field 组件默认渲染一个类型为 text 的 input，但你可以 控制它

📚 文档

阅读文档和演示。

贡献

欢迎为本项目做出贡献，但在开始之前，请确保您已阅读贡献指南。

致谢

• 受 Laravel 的 validation syntax
• v4 API 受 Formik's
• Nested path types 由 react-hook-form
• Logo 由 Baianat

退休员工

在此，我们向那些对本项目做出重大贡献的过往贡献者和赞助者致以敬意。

• Baianat.

⚖️ 许可证

以 MIT 许可证由 @logaretm 发布。