VeeValidate per la validazione basata su schema
useForm(), useField(), schemi yup, messaggi di errore, gestione della validazione asincrona
VeeValidate per la validazione basata su schema è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Scalare con VeeValidate
Quando i moduli crescono, scrivere manualmente la validazione diventa noioso. VeeValidate è una libreria Vue molto usata che gestisce lo stato del modulo, esegue la validazione rispetto a uno schema ed espone gli errori, il tutto in modo reattivo.
Validazione basata su schema
Anziché scrivere i controlli manualmente, descriva le regole in modo dichiarativo all'interno di uno schema. Abbinando VeeValidate a yup può creare questo schema in modo fluido.
<script setup>
import * as yup from 'yup'
const schema = yup.object({
name: yup.string().required(),
email: yup.string().email().required()
})
</script>Configurare il modulo con useForm
useForm inizializza lo stato e la validazione a livello di modulo. Passi lo schema come validationSchema e la funzione collegherà automaticamente tutti gli elementi.
<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
validationSchema: schema
})
</script>Collegare un campo con useField
useField registra un input tramite il suo nome. Restituisce il value del campo, il relativo errorMessage e un gestore handleBlur.
<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>Associare il campo nel template
Associ il value restituito tramite v-model e colleghi @blur a handleBlur per eseguire la validazione al verificarsi di blur.
<template>
<input v-model="name" @blur="handleBlur" />
<span>{{ errorMessage }}</span>
</template>Visualizzare il messaggio di errore
Ogni campo espone il proprio errorMessage, che è una stringa reattiva. È vuota quando il campo è valido e contiene il messaggio dello schema quando non è valido.
<template>
<input v-model="name" @blur="handleBlur" />
<span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>Gestire l'invio
handleSubmit racchiude la funzione di invio. Esegue prima la validazione e chiama la funzione di callback con i valori solo se l'intero modulo è valido.
<script setup>
const onSubmit = handleSubmit((values) => {
console.log('valid form', values)
})
</script>
<template>
<form @submit="onSubmit">...</form>
</template>Errori a livello di modulo
L'oggetto errors restituito da useForm associa i nomi dei campi ai relativi messaggi correnti ed è utile per un riepilogo o per un'interfaccia condizionale.
<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>Perché usare una libreria
- Gli schemi dichiarativi sostituiscono i ripetitivi controlli manuali.
- Gestione integrata dei momenti di validazione al verificarsi di blur, durante la modifica e all'invio.
errorMessageper ogni campo ederrorsa livello di modulo.- Regole asincrone e tra campi semplici da definire tramite yup.
Componenti e Composition API
VeeValidate offre anche i componenti <Form> e <Field> per uno stile incentrato sul template. Le funzioni di composizione useForm e useField si integrano meglio con <script setup> e offrono un maggiore controllo.
Validazione manuale e basata su schema
La validazione manuale insegna i meccanismi di base ed è adatta ai moduli molto piccoli. La validazione basata su schema con VeeValidate e yup si adatta a moduli grandi e complessi con molto meno codice e meno bug.
Verifica rapida
Verifichi le Sue conoscenze su VeeValidate.
Riepilogo
Validazione basata su schema con VeeValidate:
- Descriva le regole in uno schema
yuppassato comevalidationSchema. useFormgestisce lo stato del modulo,errorsehandleSubmit.useFieldrestituiscevalue,errorMessageehandleBlurper ogni input.- Si adatta molto meglio della validazione manuale ai moduli di grandi dimensioni.
Domande Frequenti
La lezione «VeeValidate per la validazione basata su schema» è gratuita?
Sì — il testo completo di «VeeValidate per la validazione basata su schema» è 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 «VeeValidate per la validazione basata su schema»?
useForm(), useField(), schemi yup, messaggi di errore, gestione della validazione asincrona 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 4 di 4.
Quanto tempo richiede la lezione «VeeValidate per la validazione basata su schema»?
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
- v-model su tutti gli elementi dei form
- Invio e reset dei form
- Pattern di validazione manuale
- VeeValidate per la validazione basata su schema