Vue Academy · Lekcja

Wzorce ręcznej walidacji

Reaktywne obiekty błędów, walidacja podczas utraty fokusu a podczas wysyłania, sprawdzanie zgodności haseł.

Wzorce ręcznej walidacji to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 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.

Walidacja bez biblioteki

W prostych formularzach można przeprowadzać walidację ręcznie za pomocą reaktywnego stanu. Należy śledzić błędy, wykonywać sprawdzenia podczas wysyłania formularza lub po opuszczeniu pola i wyświetlać komunikaty za pomocą dyrektyw. Pozwala to poznać podstawy, na których opiera się każda biblioteka.

Obiekt errors

Zachowaj reaktywny obiekt errors z kluczami odpowiadającymi nazwom pól. Pusty ciąg znaków (lub brak klucza) oznacza brak błędu.

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

Funkcja validate

Napisz funkcję validate, która sprawdza każde pole i ustawia komunikaty w obiekcie errors. Funkcja powinna zwracać informację, czy formularz jest poprawny.

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

Walidacja podczas wysyłania

Wywołaj validate na początku procedury obsługi wysyłania formularza i przerwij jej działanie, jeśli walidacja się nie powiedzie. Dzięki temu nie zostaną wysłane niepoprawne dane.

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

Walidacja poszczególnych pól przy opuszczeniu pola

Walidacja wykonywana dopiero podczas wysyłania formularza może wydawać się powolna. Waliduj pojedyncze pole, gdy użytkownik je opuszcza, korzystając z @blur, aby natychmiast przekazywać informacje zwrotne.

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

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

Wyświetlanie komunikatów o błędach

Użyj v-if, aby wyświetlać komunikat tylko wtedy, gdy dane pole zawiera błąd. Umieść go w pobliżu pola wejściowego.

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

Stylowanie niepoprawnych pól

Powiąż klasę za pomocą składni obiektowej, aby dodać czerwoną obwódkę, gdy wystąpi błąd. Klasa jest stosowana tylko wtedy, gdy errors.name ma wartość truthy.

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

Styl error

Niewielka reguła CSS dopełnia wygląd — czerwona obwódka sygnalizuje, że pole wymaga uwagi.

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

Obliczany stan poprawności

Wyznacz ogólną flagę poprawności za pomocą computed, aby reaktywnie włączać lub wyłączać przycisk wysyłania formularza.

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

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

Zalety i ograniczenia

Ręczna walidacja jest przejrzysta i nie wymaga zależności, dlatego doskonale nadaje się do małych formularzy. Jednak wraz z rozwojem reguł — sprawdzaniem zależności między polami, walidacją asynchroniczną i większą liczbą pól — ilość powtarzalnego kodu rośnie. Właśnie dlatego istnieją biblioteki.

Podsumowanie procesu walidacji

Wzorzec obejmuje: reaktywny obiekt błędów, funkcję validate, uruchamianie jej podczas wysyłania formularza (opcjonalnie także po opuszczeniu pola), wyświetlanie komunikatów za pomocą v-if oraz stylowanie warunkową klasą.

Szybki test

Sprawdź swoją wiedzę na temat ręcznej walidacji.

Podsumowanie

Wzorce ręcznej walidacji:

Zachowaj reaktywny obiekt errors z kluczami odpowiadającymi polom.
Funkcja validate ustawia komunikaty i zwraca informację o poprawności.
Waliduj formularz podczas wysyłania, a poszczególne pola przy @blur, aby szybko przekazywać informacje zwrotne.
Wyświetlaj komunikaty za pomocą v-if="errors.x" i styluj pola za pomocą :class="{ error: errors.x }".

Często zadawane pytania

Czy lekcja „Wzorce ręcznej walidacji” jest bezpłatna?

Tak — pełny tekst „Wzorce ręcznej walidacji” 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 „Wzorce ręcznej walidacji”?

Reaktywne obiekty błędów, walidacja podczas utraty fokusu a podczas wysyłania, sprawdzanie zgodności haseł. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Wzorce ręcznej walidacji”?

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