vee-validate README

The project's README from github.com/logaretm/vee-validate. As one markdown file: README.md.

Painless Vue forms



Features

Getting Started

Installation

# Install with yarn
yarn add vee-validate

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

Vue version support

The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table

vue Version vee-validate version Documentation Link
2.x 2.x or 3.x v2 or v3
3.x 4.x or 5.x v4 or v5

Usage

vee-validate offers two styles to integrate form validation into your Vue.js apps.

Composition API

The fastest way to create a form and manage its validation, behavior, and values is with the composition API.

Create your form with useForm and then use defineField to create your field model and props/attributes and handleSubmit to use the values and send them to an 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>

You can do so much more than this, for more info check the composition API documentation.

Declarative Components

Higher-order components can also be used to build forms. Register the Field and Form components and create a simple required validator:

<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>

The Field component renders an input of type text by default but you can control that

📚 Documentation

Read the documentation and demos.

Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

Credits

Emeriti

Here we honor past contributors and sponsors who have been a major part on this project.

⚖️ License

Released under MIT by @logaretm.

vee-validate (logaretm/vee-validate)

Searching Database…

11.3K ·GitHub
Vee-validate
这是什么？vee-validate 是一个用于 Vue.js 表单的验证库，可以通过模板以声明式的方式对字段和表单进行验证。
它是框架还是库？它是一个库，安装到现有的 Vue.js 项目中使用，同时提供 Composition API 和声明式组件两种方式来做表单验证。
怎样把它加到项目里？先安装这个包，然后可以选择使用 Composition API（useForm、defineField、handleSubmit），或者注册 Field 和 Form 组件，以声明式的方式搭建表单。
需要哪个版本的 Vue？主版本 v4/v5 只支持 Vue 3.x；如果使用 Vue 2.x，则需要改用 vee-validate v2 或 v3。
它是否只能配合某个特定的 UI 库使用？不是。它与 UI 无关，可以配合原生 HTML 元素或你选择的任何 UI 组件库使用，因为它只负责验证逻辑。
它是否自带内置的验证规则？是的，它配有一个配套的规则库，提供了 25 条以上的内置规则，覆盖大多数常见的 Web 应用验证需求。
它是否支持多语言的错误提示？是的，内置规则自带 45 种以上的语言包，由世界各地的开发者贡献。
验证能否异步进行，或只针对特定字段运行？可以。验证既可以是同步的，也可以是异步的，并且可以应用在单个字段级别，也可以应用在整个表单级别。
vee-validate 的设计受到了哪些项目的启发？它的验证语法借鉴了 Laravel 的验证功能，v4 版本的 API 借鉴了 Formik，嵌套路径的类型定义则借鉴了 react-hook-form。
What are similar projects?formily, validator.js, redux-form, cleave.js, vuestic-admin, vue-admin-better, react-jsonschema-form, jquery-validation
Which topics is it in?form-validation, validations, validator, form, vue2, forms, validation, vuejs, vue3, i18n, vue, hacktoberfest
Creator
logaretm
Size
23 MB
Stars
11.3K
Updated
CommitMar 04Releasev4.15.1Jun 07
Age
10y
Commits · 90 Days