Hai mai provato a inviare un modulo, solo per la pagina web per darti un messaggio di errore che ti dice che uno o più campi non sono validi? Se è così, allora hai sperimentato la convalida del modulo.
La convalida è spesso essenziale per ottenere dati puliti e utilizzabili. Dagli indirizzi e-mail alle date, se deve essere accurato, devi controllarlo attentamente.
Che cos'è la convalida del modulo?
La convalida del modulo è il processo per garantire che i dati inseriti in un modulo da un utente siano corretti e completi. Puoi farlo sul lato client, utilizzando le funzionalità HTML integrate come l'attributo richiesto. Puoi anche convalidare sul client utilizzando JavaScripte sono disponibili librerie Next.js esterne per semplificare il processo.
Ci sono diversi motivi per cui la convalida del modulo è essenziale. Innanzitutto, aiuta a garantire che i dati inseriti in un modulo siano completi e corretti. Questo è importante perché aiuta a prevenire errori quando la tua app invia dati a un server o database.
In secondo luogo, la convalida del modulo può aiutare a migliorare l'usabilità di un modulo fornendo un feedback quando un utente inserisce dati non validi. Questo può aiutare a evitare frustrazione e confusione da parte dell'utente.
Infine, la convalida del modulo può aiutare a migliorare la sicurezza di un modulo garantendo che invii solo dati validi.
Come convalidare i moduli in Next.js
Esistono due modi per convalidare i moduli in Next.js: utilizzando i metodi integrati o utilizzando librerie esterne.
Utilizzo dei metodi integrati
L'HTML fornisce diversi metodi per convalidare i moduli, il più comune dei quali è il necessario attributo. Ciò garantisce che un campo non possa essere vuoto. Puoi utilizzare questo metodo dalla tua app Next.js, semplicemente includendo l'attributo nei tag di input che generi. HTML fornisce anche un file modello attributo. Puoi usarlo insieme a a espressione regolare per una convalida più complessa.
Questo esempio include un modulo con due campi: nome ed e-mail. Il campo del nome è obbligatorio e il campo dell'e-mail deve corrispondere a un'espressione regolare.
importare Reagire da 'reagire'classeMyFormestendeReagire.Componente{
rendere() {
ritorno (
<modulo >
<etichetta>
Nome:
<tipo di input="testo" nome="nome" necessario />
</label>
<etichetta>
E-mail:
<tipo di input="e-mail" nome="e-mail"
modello="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<tipo di input="invia" valore="Invia" />
</form>
)
}
}
esportarepredefinito MyForm
Questo codice importa la libreria React, quindi crea una classe chiamata MyForm e visualizza un elemento del modulo. All'interno dell'elemento form sono presenti due elementi label.
Il primo elemento dell'etichetta contiene un campo di immissione testo obbligatorio. Il secondo elemento label contiene un campo di input email con un'espressione regolare nel suo attributo pattern.
Infine, hai un pulsante di invio. Quando un utente invia il modulo, l'attributo required assicura che abbia compilato il campo del nome. L'attributo pattern del campo email garantisce che l'email sia nel formato specificato. Se una di queste condizioni fallisce, il modulo non verrà inviato.
Ci sono alcuni svantaggi nell'usare i metodi incorporati. Innanzitutto, può essere difficile tenere traccia di tutte le diverse regole di convalida impostate. In secondo luogo, se si dispone di molti campi, può essere noioso aggiungere l'attributo richiesto a ciascuno di essi. Infine, i metodi integrati forniscono solo la convalida di base. Se vuoi eseguire una convalida più complessa, dovrai utilizzare una libreria esterna.
Utilizzo di una libreria esterna
Oltre ai metodi integrati, esistono anche molte librerie esterne che è possibile utilizzare per convalidare i moduli. Alcune librerie popolari includono Formik, react-hook-form e Yup.
Per utilizzare una libreria esterna, devi prima installarla. Ad esempio, per installare Formik, esegui il seguente comando:
npm installare formikUna volta installata la libreria, puoi importarla nel tuo componente e utilizzarla per convalidare il tuo modulo:
importare Reagire da 'reagire'
importare { Formik, Modulo, Campo } da 'formico'cost MioForm = () => (
<Formik
valori iniziali={{ nome: '', e-mail: '' }}
validate={valori => {
cost errori = {}
Se (!valori.nome) {
errori.nome = 'Necessario'
}
Se (!valori.e-mail) {
errori.email = 'Necessario'
} altroSe (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (valori.e-mail)
) {
errori.email = 'indirizzo email non valido'
}
ritorno errori
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
mettere in guardia(JSON.stringify (valori, nullo, 2))
setInvio(falso)
}, 400)
}}
>
{({ isSubmitting }) => (
<Modulo>
<Tipo di campo="testo" nome="nome" />
<Tipo di campo="e-mail" nome="e-mail" />
<tipo di pulsante="invia" disabilitato={isSubmitting}>
Invia
</button>
</Form>
)}
</Formik>
)
esportarepredefinito MyForm
Qui, per prima cosa importi il file Formik, Modulo, E Campo componenti dalla libreria Formik. Quindi, crea un componente chiamato MyForm. Questo componente esegue il rendering di un modulo con due campi: nome ed e-mail.
La prop initialValues imposta i valori iniziali dei campi del modulo. In questo caso, i campi nome ed e-mail sono entrambi stringhe vuote.
Il prop validate imposta le regole di convalida per i campi del modulo. In questo caso, il campo del nome è obbligatorio e il campo dell'e-mail deve corrispondere a un'espressione regolare.
La prop onSubmit imposta la funzione che React chiamerà quando l'utente invia il modulo. In questo caso, la funzione è un avviso che visualizzerà i valori dei campi del modulo.
La prop isSubmitting determina se il modulo è attualmente in fase di invio. In questo caso, impostalo su false.
Infine, esegui il rendering del modulo utilizzando il componente Form di Formik.
Vantaggi dell'utilizzo di librerie esterne in Next.js
Ci sono diversi vantaggi nell'usare una libreria esterna come Formik per convalidare i moduli in Next.js. Un vantaggio è che è molto più semplice visualizzare i messaggi di errore all'utente. Ad esempio, se un campo obbligatorio non viene compilato, Formik visualizzerà automaticamente un messaggio di errore che include una soluzione suggerita.
Un altro vantaggio è che Formik può gestire regole di convalida più complesse. Ad esempio, puoi utilizzare Formik per verificare che due campi siano uguali (come una password e un campo di conferma della password).
Infine, Formik semplifica l'invio dei dati del modulo a un server. Ad esempio, puoi utilizzare Formik per inviare i dati del modulo a un'API.
Aumenta il coinvolgimento degli utenti utilizzando i moduli
Puoi utilizzare i moduli per aumentare il coinvolgimento degli utenti. Fornendo un feedback quando un utente inserisce dati non validi, puoi contribuire a evitare frustrazione e confusione.
Utilizzando librerie esterne, puoi aggiungere funzionalità come il completamento automatico e i campi condizionali. Questi possono aiutarti a rendere i tuoi moduli ancora più intuitivi. Se utilizzati correttamente, i moduli possono essere uno strumento potente per aiutarti ad aumentare il coinvolgimento degli utenti e raccogliere i dati di cui hai bisogno.
Oltre alla convalida, Next.js ha molte funzionalità che puoi utilizzare per aumentare il coinvolgimento degli utenti.
