Vue Academy · Урок

VeeValidate для проверки по схеме

useForm(), useField(), схемы yup, сообщения об ошибках, обработка асинхронной проверки

«VeeValidate для проверки по схеме» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Масштабирование с VeeValidate

По мере роста форм написанная вручную проверка становится утомительной. VeeValidate — популярная библиотека Vue, которая управляет состоянием формы, выполняет проверку по схеме и реактивно предоставляет ошибки.

Проверка на основе схемы

Вместо того чтобы вручную писать проверки, описывайте правила декларативно в schema. Сочетание VeeValidate с yup позволяет удобно создавать такую схему.

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

Настройка формы с помощью useForm

useForm инициализирует состояние формы и проверку. Передайте свою схему как validationSchema, и функция свяжет всё воедино.

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

Подключение поля с помощью useField

useField регистрирует одно поле ввода по имени. Он возвращает значение поля value, его сообщение об ошибке errorMessage и обработчик handleBlur.

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

Связывание поля в шаблоне

Свяжите возвращаемое значение value с помощью v-model, а @blur — с handleBlur, чтобы выполнять проверку при потере фокуса.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

Отображение сообщения об ошибке

Каждое поле предоставляет собственное errorMessage — реактивную строку. При корректном значении она пуста, а при ошибке содержит сообщение из схемы.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

Обработка отправки

handleSubmit оборачивает функцию отправки. Сначала запускается проверка, и только если вся форма корректна, функция вызывает вашу функцию обратного вызова со значениями.

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

Ошибки на уровне формы

Объект errors из useForm сопоставляет имена полей с текущими сообщениями об ошибках. Это удобно для сводки или условного интерфейса.

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

Зачем использовать библиотеку

Декларативные схемы заменяют повторяющиеся ручные проверки.
Встроенное управление моментом проверки при потере фокуса, изменении и отправке.
Собственное сообщение errorMessage для каждого поля и объект errors на уровне формы.
Простая поддержка асинхронных правил и правил для нескольких полей с помощью yup.

Компоненты и API композиции

VeeValidate также предоставляет компоненты <Form> и <Field> для подхода с приоритетом шаблона. Функции композиции useForm и useField лучше подходят для <script setup> и дают больше контроля.

Ручная проверка и проверка по схеме

Ручная проверка помогает понять механику и подходит для очень маленьких форм. Проверка на основе схемы с VeeValidate и yup лучше масштабируется для больших сложных форм, требуя гораздо меньше кода и приводя к меньшему числу ошибок.

Быстрая проверка

Проверьте свои знания о VeeValidate.

Итоги

Проверка на основе схемы с VeeValidate:

Описывайте правила в схеме yup, переданной как validationSchema.
useForm управляет состоянием формы, errors и handleSubmit.
useField возвращает value, errorMessage и handleBlur для каждого поля ввода.
Для больших форм этот подход масштабируется гораздо лучше ручной проверки.

Часто задаваемые вопросы

Урок «VeeValidate для проверки по схеме» бесплатный?

Да — полный текст урока «VeeValidate для проверки по схеме» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «VeeValidate для проверки по схеме»?

useForm(), useField(), схемы yup, сообщения об ошибках, обработка асинхронной проверки Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «VeeValidate для проверки по схеме»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy