0Pricing
Vue Academy · Lezione

Pattern di validazione manuale

Oggetti reattivi degli errori, validazione al blur o all'invio, verifica della corrispondenza delle password

Pattern di validazione manuale è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Validazione senza una libreria

Per i moduli semplici può eseguire la validazione manualmente usando uno stato reattivo. Tenga traccia degli errori, esegua i controlli all'invio o al verificarsi di blur e mostri i messaggi con le direttive. In questo modo apprenderà i fondamenti su cui si basano tutte le librerie.

Un oggetto errors

Mantenga un oggetto reattivo errors indicizzato per nome del campo. Una stringa vuota, o una chiave mancante, indica che non ci sono errori.

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

Una funzione validate

Scriva una funzione validate che controlli ogni campo e imposti i messaggi nell'oggetto degli errori. Restituisca un valore che indichi se il modulo è valido.

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

Validazione all'invio

Chiami validate all'inizio del gestore dell'invio e interrompa l'esecuzione se la validazione fallisce. In questo modo garantisce che non vengano inviati dati non validi.

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

Validazione per campo al verificarsi di blur

Eseguire la validazione solo all'invio può sembrare lento. Validi un singolo campo quando l'utente lo abbandona, usando @blur per fornire un feedback immediato.

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

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

Visualizzare i messaggi di errore

Utilizzi v-if per mostrare un messaggio solo quando il campo contiene un errore. Lo collochi vicino all'input.

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

Applicare stili ai campi non validi

Associ una classe usando la sintassi a oggetto per aggiungere un bordo rosso quando esiste un errore. La classe viene applicata solo mentre errors.name è truthy.

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

Lo stile error

Una piccola regola CSS completa l'aspetto: un bordo rosso segnala che il campo richiede attenzione.

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

Validità calcolata

Derivi un indicatore complessivo di validità con computed per abilitare o disabilitare reattivamente il pulsante di invio.

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

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

Punti di forza e limiti

La validazione manuale è trasparente e non richiede dipendenze, quindi è ideale per i moduli piccoli. Tuttavia, quando aumentano le regole, con controlli tra campi, validazione asincrona e molti campi, anche il codice ripetitivo aumenta: è per questo che esistono le librerie.

Riepilogo del flusso di validazione

Il modello è il seguente: errori reattivi, una funzione validate, esecuzione all'invio e, facoltativamente, al verificarsi di blur, visualizzazione dei messaggi con v-if e applicazione di stili tramite una classe condizionale.

Verifica rapida

Verifichi le Sue conoscenze sulla validazione manuale.

Riepilogo

Modelli di validazione manuale:

  • Mantenga un oggetto reattivo errors indicizzato per campo.
  • Una funzione validate imposta i messaggi e restituisce la validità.
  • Esegua la validazione all'invio e, per ogni campo, su @blur per fornire un feedback rapido.
  • Mostri i messaggi con v-if="errors.x" e applichi gli stili con :class="{ error: errors.x }".

Domande Frequenti

La lezione «Pattern di validazione manuale» è gratuita?

Sì — il testo completo di «Pattern di validazione manuale» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Pattern di validazione manuale»?

Oggetti reattivi degli errori, validazione al blur o all'invio, verifica della corrispondenza delle password Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Pattern di validazione manuale»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. v-model su tutti gli elementi dei form
  2. Invio e reset dei form
  3. Pattern di validazione manuale
  4. VeeValidate per la validazione basata su schema
← Torna a Vue Academy