Vue Academy · Урок

Шаблоны ручной проверки

Реактивные объекты ошибок, проверка при потере фокуса и отправке, совпадение подтверждения пароля

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

Проверка без библиотеки

Для простых форм можно выполнять проверку вручную с помощью реактивного состояния. Вы отслеживаете ошибки, запускаете проверки при отправке или потере фокуса и показываете сообщения с помощью директив. Это знакомит вас с основами, на которых строится каждая библиотека.

Объект ошибок

Храните реактивный объект errors, ключами которого служат имена полей. Пустая строка (или отсутствующий ключ) означает, что ошибки нет.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>

Функция validate

Напишите функцию validate, которая проверяет каждое поле и задаёт сообщения в объекте ошибок. Она должна возвращать признак корректности формы.

<script setup>
function validate() {
  errors.name = form.name ? '' : 'Name is required'
  errors.email = form.email.includes('@') ? '' : 'Invalid email'
  return !errors.name && !errors.email
}
</script>

Проверка при отправке

Вызовите validate в начале обработчика отправки и прекратите выполнение, если проверка завершилась неудачно. Это гарантирует, что некорректные данные не будут отправлены.

<script setup>
function onSubmit() {
  if (!validate()) return
  // proceed to send
}
</script>

Проверка каждого поля при потере фокуса

Проверка только при отправке может казаться медленной. Проверяйте отдельное поле, когда пользователь покидает его, используя @blur для мгновенной обратной связи.

<script setup>
function validateName() {
  errors.name = form.name ? '' : 'Name is required'
}
</script>

<template>
  <input v-model="form.name" @blur="validateName" />
</template>

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

Используйте v-if, чтобы показывать сообщение только тогда, когда в этом поле есть ошибка. Размещайте его рядом с полем ввода.

<template>
  <input v-model="form.name" @blur="validateName" />
  <span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>

Стилизация некорректных полей

Привяжите класс с помощью синтаксиса объекта, чтобы добавлять красную границу при наличии ошибки. Класс применяется только пока errors.name имеет истинное значение.

<input
  v-model="form.name"
  :class="{ error: errors.name }"
  @blur="validateName"
/>

Стиль ошибки

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

<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>

Вычисляемая корректность

Получите общий признак корректности с помощью computed, чтобы реактивно включать или отключать кнопку отправки.

<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>

<template>
  <button :disabled="!isValid">Submit</button>
</template>

Преимущества и ограничения

Ручная проверка прозрачна и не требует зависимостей, поэтому идеально подходит для небольших форм. Но по мере роста числа правил — проверок нескольких полей, асинхронных проверок и большого количества полей — объём шаблонного кода увеличивается. Именно поэтому существуют библиотеки.

Краткое описание процесса проверки

Подход выглядит так: реактивные ошибки, функция validate, её запуск при отправке (и при необходимости при потере фокуса), отображение сообщений с помощью v-if и стилизация условным классом.

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

Проверьте свои знания о ручной проверке.

Итоги

Подходы к ручной проверке:

Храните реактивный объект errors, ключами которого служат поля.
Функция validate задаёт сообщения и возвращает признак корректности.
Выполняйте проверку при отправке, а для быстрой обратной связи — каждого поля при @blur.
Показывайте сообщения с помощью v-if="errors.x" и стилизуйте поля с помощью :class="{ error: errors.x }".

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

Урок «Шаблоны ручной проверки» бесплатный?

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

Чему я научусь в уроке «Шаблоны ручной проверки»?

Реактивные объекты ошибок, проверка при потере фокуса и отправке, совпадение подтверждения пароля Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Шаблоны ручной проверки»?

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

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

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

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

← Назад к Vue Academy