Vue Academy · Lekcja

VeeValidate do walidacji opartej na schemacie

useForm(), useField(), schematy yup, komunikaty błędów, obsługa walidacji asynchronicznej.

Lekcja 4 z 413 kroki

VeeValidate do walidacji opartej na schemacie to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Skalowanie za pomocą VeeValidate

Wraz ze wzrostem formularzy ręcznie pisana walidacja staje się uciążliwa. VeeValidate to popularna biblioteka Vue, która zarządza stanem formularza, przeprowadza walidację względem schematu i udostępnia błędy — wszystko reaktywnie.

Walidacja oparta na schemacie

Zamiast ręcznie pisać sprawdzenia opisujesz reguły deklaratywnie w schemacie. Połączenie VeeValidate z yup pozwala wygodnie budować taki schemat.

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

Konfigurowanie formularza za pomocą useForm

useForm inicjalizuje stan formularza i walidację. Przekaż schemat jako validationSchema, a wszystkie elementy zostaną połączone.

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

Powiązanie pola za pomocą useField

useField rejestruje jedno pole wejściowe na podstawie jego nazwy. Zwraca wartość pola value, jego errorMessage oraz procedurę obsługi handleBlur.

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

Powiązanie pola w szablonie

Powiąż zwróconą wartość value za pomocą v-model i połącz @blur z handleBlur, aby przeprowadzać walidację po opuszczeniu pola.

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

Wyświetlanie komunikatu o błędzie

Każde pole udostępnia własny errorMessage, który jest reaktywnym ciągiem znaków. Gdy pole jest poprawne, ciąg jest pusty, a gdy jest niepoprawne, zawiera komunikat ze schematu.

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

Obsługa wysyłania formularza

handleSubmit opakowuje funkcję wysyłania formularza. Najpierw przeprowadza walidację i wywołuje przekazaną funkcję zwrotną z wartościami tylko wtedy, gdy cały formularz jest poprawny.

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

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

Błędy na poziomie formularza

Obiekt errors z useForm mapuje nazwy pól na ich bieżące komunikaty, co przydaje się do tworzenia podsumowania lub warunkowego interfejsu.

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

Dlaczego warto używać biblioteki

Deklaratywne schematy zastępują powtarzalne ręczne sprawdzenia.
Wbudowana obsługa momentu walidacji przy opuszczeniu pola, zmianie i wysłaniu formularza.
errorMessage dla poszczególnych pól i errors na poziomie formularza.
Łatwe definiowanie reguł asynchronicznych i zależności między polami za pomocą yup.

Komponenty a Composition API

VeeValidate udostępnia również komponenty <Form> i <Field>, przeznaczone do pracy przede wszystkim z szablonem. Funkcje kompozycji useForm i useField lepiej pasują do <script setup> i zapewniają większą kontrolę.

Walidacja ręczna a walidacja oparta na schemacie

Ręczna walidacja pozwala poznać mechanizmy i sprawdza się w bardzo małych formularzach. Walidacja oparta na schemacie za pomocą VeeValidate i yup skaluje się do dużych, złożonych formularzy, zapewniając znacznie mniej kodu i błędów.

Szybki test

Sprawdź swoją wiedzę na temat VeeValidate.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Walidacja oparta na schemacie za pomocą VeeValidate:

Opisz reguły w schemacie yup przekazanym jako validationSchema.
useForm zarządza stanem formularza, obiektem errors i funkcją handleSubmit.
useField zwraca dla każdego pola value, errorMessage i handleBlur.
Znacznie lepiej skaluje się w przypadku dużych formularzy niż walidacja ręczna.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „VeeValidate do walidacji opartej na schemacie” jest bezpłatna?

Tak — pełny tekst „VeeValidate do walidacji opartej na schemacie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „VeeValidate do walidacji opartej na schemacie”?

useForm(), useField(), schematy yup, komunikaty błędów, obsługa walidacji asynchronicznej. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „VeeValidate do walidacji opartej na schemacie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

v-model dla wszystkich elementów formularza
Wysyłanie i resetowanie formularza
Wzorce ręcznej walidacji
VeeValidate do walidacji opartej na schemacie

← Powrót do Vue Academy