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?Нет, она не зависит от интерфейса: работает с нативными HTML-элементами или с любой библиотекой UI-компонентов на ваш выбор, так как занимается только логикой проверки.
Есть ли встроенные правила проверки из коробки?Да, есть сопутствующая библиотека правил с более чем 25 встроенными правилами, которых хватает для большинства типичных задач проверки веб-приложений.
Поддерживаются ли несколько языков для сообщений об ошибках?Да, в комплекте более 45 локалей для встроенных правил, которые добавляют разработчики со всего мира.
Может ли проверка быть асинхронной или запускаться только для отдельных полей?Да, проверка может быть синхронной или асинхронной и применяться как к отдельному полю, так и ко всей форме.
Что повлияло на дизайн vee-validate?Синтаксис проверки вдохновлён Laravel, API v4 — Formik, а типизация вложенных путей — react-hook-form.
What are similar projects?formily, validator.js, redux-form, cleave.js, vuestic-admin, vue-admin-better, react-jsonschema-form, formik
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