Har du noen gang prøvd å sende inn et skjema, kun for at nettsiden skal gi deg en feilmelding som forteller deg at ett eller flere av feltene er ugyldige? I så fall har du opplevd skjemavalidering.
Validering er ofte avgjørende for å få rene, brukbare data. Fra e-postadresser til datoer, hvis det må være nøyaktig, må du sjekke det nøye.
Hva er skjemavalidering?
Skjemavalidering er prosessen for å sikre at dataene som legges inn i et skjema av en bruker er korrekte og fullstendige. Du kan gjøre dette på klientsiden ved å bruke innebygde HTML-funksjoner som det nødvendige attributtet. Du kan også validere på klienten ved hjelp av JavaScript, og det er eksterne Next.js-biblioteker for å lette prosessen.
Det er flere grunner til at skjemavalidering er viktig. For det første hjelper det å sikre at dataene som legges inn i et skjema er fullstendige og korrekte. Dette er viktig fordi det bidrar til å forhindre feil når appen din sender data til en server eller database.
For det andre kan skjemavalidering bidra til å forbedre brukervennligheten til et skjema ved å gi tilbakemelding når en bruker legger inn ugyldige data. Dette kan bidra til å unngå frustrasjon og forvirring hos brukeren.
Til slutt kan skjemavalidering bidra til å forbedre sikkerheten til et skjema ved å sikre at det bare sender inn gyldige data.
Slik validerer du skjemaer i Next.js
Det er to måter å validere skjemaer på i Next.js: ved å bruke de innebygde metodene eller ved å bruke eksterne biblioteker.
Bruke de innebygde metodene
HTML gir flere metoder for å validere skjemaer, hvorav den vanligste er nødvendig Egenskap. Dette sikrer at et felt ikke kan være tomt. Du kan bruke denne metoden fra Next.js-appen din, ganske enkelt ved å inkludere attributtet i input-taggene du genererer. HTML gir også en mønster Egenskap. Du kan bruke denne sammen med en regulært uttrykk for mer kompleks validering.
Dette eksemplet inkluderer et skjema med to felt: navn og e-post. Navnefeltet er obligatorisk, og e-postfeltet må samsvare med et regulært uttrykk.
import Reagere fra 'reagere'klasseMyFormstrekkerReagere.Komponent{
render() {
komme tilbake (
<form >
<merkelapp>
Navn:
<input type="tekst" navn="Navn" nødvendig />
</label>
<merkelapp>
E-post:
<input type="e-post" navn="e-post"
mønster="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<input type="sende inn" verdi="Sende inn" />
</form>
)
}
}
eksportmisligholde MyForm
Denne koden importerer React-biblioteket, lager deretter en klasse kalt MyForm og gjengir et skjemaelement. Inne i skjemaelementet er det to etikettelementer.
Det første etikettelementet inneholder et nødvendig tekstinntastingsfelt. Det andre etikettelementet inneholder et e-postinndatafelt med et regulært uttrykk i mønsterattributtet.
Til slutt har du en send-knapp. Når en bruker sender inn skjemaet, sikrer det påkrevde attributtet at de har fylt ut navnefeltet. E-postfeltets mønsterattributt sikrer at e-posten er i det angitte formatet. Hvis en av disse betingelsene mislykkes, sendes ikke skjemaet inn.
Det er noen ulemper ved å bruke de innebygde metodene. For det første kan det være vanskelig å holde styr på alle de forskjellige valideringsreglene du har satt opp. For det andre, hvis du har mange felt, kan det være kjedelig å legge til det nødvendige attributtet til hvert felt. Til slutt gir de innebygde metodene bare grunnleggende validering. Hvis du vil gjøre mer kompleks validering, må du bruke et eksternt bibliotek.
Bruke et eksternt bibliotek
I tillegg til de innebygde metodene, finnes det også mange eksterne biblioteker som du kan bruke til å validere skjemaer. Noen populære biblioteker inkluderer Formik, react-hook-form og Yup.
For å bruke et eksternt bibliotek, må du først installere det. For å installere Formik, kjør for eksempel følgende kommando:
npm installere formikNår du har installert biblioteket, kan du importere det til komponenten din og bruke det til å validere skjemaet ditt:
import Reagere fra 'reagere'
import { Formik, Form, Field } fra 'formik'konst MyForm = () => (
<Formik
initialValues={{ navn: '', e-post: '' }}
validere={verdier => {
konst feil = {}
hvis (!verdier.Navn) {
errors.name = 'Obligatorisk'
}
hvis (!verdier.e-post) {
errors.email = 'Obligatorisk'
} ellershvis (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (verdier.e-post)
) {
errors.email = 'Ugyldig epostadresse'
}
komme tilbake feil
}}
onSubmit={(verdier, { setSubmitting }) => {
setTimeout(() => {
varsling(JSON.stringify (verdier, null, 2))
setSender(falsk)
}, 400)
}}
>
{({ erSender }) => (
<Skjema>
<Felttype="tekst" navn="Navn" />
<Felttype="e-post" navn="e-post" />
<knapp type="sende inn" disabled={isSubmitting}>
Sende inn
</button>
</Form>
)}
</Formik>
)
eksportmisligholde MyForm
Her importerer du først Formik, Skjema, og Felt komponenter fra Formik-biblioteket. Deretter oppretter du en komponent kalt MyForm. Denne komponenten gjengir et skjema som har to felt: navn og e-post.
InitialValues prop setter startverdiene til skjemafeltene. I dette tilfellet er både navn og e-postfelt tomme strenger.
Validere-propet setter valideringsreglene for skjemafeltene. I dette tilfellet er navnefeltet obligatorisk, og e-postfeltet skal samsvare med et regulært uttrykk.
OnSubmit-rekvisitten setter funksjonen som React vil kalle opp når brukeren sender inn skjemaet. I dette tilfellet er funksjonen et varsel som viser verdiene til skjemafeltene.
isSubmitting-rekvisitten avgjør om skjemaet sendes inn. I dette tilfellet setter du den til falsk.
Til slutt, gjengi skjemaet ved hjelp av Form-komponenten fra Formik.
Fordeler med å bruke eksterne biblioteker i Next.js
Det er flere fordeler med å bruke et eksternt bibliotek som Formik for å validere skjemaer i Next.js. En fordel er at det er mye enklere å vise feilmeldinger til brukeren. For eksempel, hvis et påkrevd felt ikke er fylt ut, vil Formik automatisk vise en feilmelding inkludert en foreslått løsning.
En annen fordel er at Formik kan håndtere mer komplekse valideringsregler. Du kan for eksempel bruke Formik til å validere at to felt er like (for eksempel et passord- og passordbekreftelsesfelt).
Til slutt gjør Formik det enkelt å sende inn skjemadataene til en server. Du kan for eksempel bruke Formik til å sende inn skjemadataene til et API.
Øk brukerengasjementet ved å bruke skjemaer
Du kan bruke skjemaer for å øke brukerengasjementet. Ved å gi tilbakemelding når en bruker legger inn ugyldige data, kan du bidra til å unngå frustrasjon og forvirring.
Ved å bruke eksterne biblioteker kan du legge til funksjoner som autofullføring og betingede felt. Disse kan bidra til å gjøre skjemaene dine enda mer brukervennlige. Når de brukes riktig, kan skjemaer være et kraftig verktøy for å hjelpe deg med å øke brukerengasjementet og samle inn dataene du trenger.
Foruten validering har Next.js mange funksjoner som du kan bruke for å øke brukerengasjementet.