Har du nogensinde prøvet at indsende en formular, kun for at websiden skal give dig en fejlmeddelelse, der fortæller dig, at et eller flere af felterne er ugyldige? Hvis ja, så har du oplevet formularvalidering.
Validering er ofte afgørende for at få rene, brugbare data. Fra e-mail-adresser til datoer, hvis det skal være nøjagtigt, skal du tjekke det omhyggeligt.
Hvad er formularvalidering?
Formularvalidering er processen til at sikre, at de data, som en bruger indtaster i en formular, er korrekte og fuldstændige. Du kan gøre dette på klientsiden ved at bruge indbyggede HTML-funktioner som den påkrævede attribut. Du kan også validere på klienten ved hjælp af JavaScript, og der er eksterne Next.js-biblioteker for at hjælpe med at lette processen.
Der er flere grunde til, at formularvalidering er vigtig. For det første er det med til at sikre, at de data, der indtastes i en formular, er fuldstændige og korrekte. Dette er vigtigt, fordi det hjælper med at forhindre fejl, når din app sender data til en server eller database.
For det andet kan formularvalidering hjælpe med at forbedre en formulars anvendelighed ved at give feedback, når en bruger indtaster ugyldige data. Dette kan hjælpe med at undgå frustration og forvirring hos brugeren.
Endelig kan formularvalidering bidrage til at forbedre sikkerheden af en formular ved at sikre, at den kun indsender gyldige data.
Sådan validerer du formularer i Next.js
Der er to måder at validere formularer i Next.js: ved at bruge de indbyggede metoder eller ved at bruge eksterne biblioteker.
Brug af de indbyggede metoder
HTML giver flere metoder til at validere formularer, hvoraf den mest almindelige er påkrævet attribut. Dette sikrer, at et felt ikke kan være tomt. Du kan bruge denne metode fra din Next.js-app, blot ved at inkludere attributten i input-tags, som du genererer. HTML giver også en mønster attribut. Du kan bruge dette sammen med en regulært udtryk for mere kompleks validering.
Dette eksempel inkluderer en formular med to felter: navn og e-mail. Navnefeltet er påkrævet, og e-mail-feltet skal matche et regulært udtryk.
importere Reagere fra 'reagere'klasseMyFormstrækker sigReagere.Komponent{
render() {
Vend tilbage (
<form >
<etiket>
Navn:
<input type="tekst" navn="navn" påkrævet />
</label>
<etiket>
E-mail:
<input type="e-mail" navn="e-mail"
mønster="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<input type="Indsend" værdi="Indsend" />
</form>
)
}
}
eksportStandard MyForm
Denne kode importerer React-biblioteket, opretter derefter en klasse kaldet MyForm og gengiver et formularelement. Inde i formularelementet er der to etiketelementer.
Det første etiketelement indeholder et påkrævet tekstindtastningsfelt. Det andet etiketelement indeholder et e-mail-indtastningsfelt med et regulært udtryk i dets mønsterattribut.
Endelig har du en send-knap. Når en bruger indsender formularen, sikrer den påkrævede attribut, at vedkommende har udfyldt navnefeltet. E-mail-feltets mønsterattribut sikrer, at e-mailen er i det angivne format. Hvis en af disse betingelser mislykkes, sendes formularen ikke.
Der er et par ulemper ved at bruge de indbyggede metoder. For det første kan det være svært at holde styr på alle de forskellige valideringsregler, som du har sat op. For det andet, hvis du har mange felter, kan det være kedeligt at tilføje den påkrævede egenskab til hver enkelt. Endelig giver de indbyggede metoder kun grundlæggende validering. Hvis du vil lave mere kompleks validering, skal du bruge et eksternt bibliotek.
Brug af et eksternt bibliotek
Udover de indbyggede metoder er der også mange eksterne biblioteker, som du kan bruge til at validere formularer. Nogle populære biblioteker inkluderer Formik, react-hook-form og Yup.
For at bruge et eksternt bibliotek skal du først installere det. For at installere Formik skal du for eksempel køre følgende kommando:
npm installere formikNår du har installeret biblioteket, kan du importere det til din komponent og bruge det til at validere din formular:
importere Reagere fra 'reagere'
importere { Formik, Form, Field } fra 'formik'konst MyForm = () => (
<Formik
initialValues={{ navn: '', e-mail: '' }}
valider={værdier => {
konst fejl = {}
hvis (!værdier.navn) {
fejl.navn = 'Påkrævet'
}
hvis (!værdier.e-mail) {
errors.email = 'Påkrævet'
} andethvis (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (værdier.e-mail)
) {
errors.email = 'ugyldig emailadresse'
}
Vend tilbage fejl
}}
onSubmit={(værdier, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify (værdier, nul, 2))
sætSender(falsk)
}, 400)
}}
>
{({ indsender }) => (
<Form>
<Felttype="tekst" navn="navn" />
<Felttype="e-mail" navn="e-mail" />
<knaptype="Indsend" disabled={isSubmitting}>
Indsend
</button>
</Form>
)}
</Formik>
)
eksportStandard MyForm
Her importerer du først Formik, Form, og Mark komponenter fra Formik-biblioteket. Derefter skal du oprette en komponent kaldet MyForm. Denne komponent gengiver en formular, der har to felter: navn og e-mail.
InitialValues prop angiver de indledende værdier for formularfelterne. I dette tilfælde er navne- og e-mail-felterne begge tomme strenge.
Validere-prop sætter valideringsreglerne for formularfelterne. I dette tilfælde er navnefeltet påkrævet, og e-mail-feltet skal matche et regulært udtryk.
OnSubmit-rekvisitten indstiller den funktion, som React vil kalde, når brugeren indsender formularen. I dette tilfælde er funktionen en advarsel, der viser værdierne for formularfelterne.
isSubmitting-rekvisitten afgør, om formularen er ved at blive indsendt. I dette tilfælde indstiller du den til falsk.
Til sidst gengiver du formularen ved hjælp af Form-komponenten fra Formik.
Fordele ved at bruge eksterne biblioteker i Next.js
Der er flere fordele ved at bruge et eksternt bibliotek som Formik til at validere formularer i Next.js. En fordel er, at det er meget nemmere at vise fejlmeddelelser til brugeren. For eksempel, hvis et påkrævet felt ikke er udfyldt, vil Formik automatisk vise en fejlmeddelelse med en foreslået rettelse.
En anden fordel er, at Formik kan håndtere mere komplekse valideringsregler. For eksempel kan du bruge Formik til at validere, at to felter er ens (såsom et kodeord og et kodeordsbekræftelsesfelt).
Endelig gør Formik det nemt at sende formulardataene til en server. For eksempel kan du bruge Formik til at indsende formulardataene til en API.
Øg brugerengagementet ved hjælp af formularer
Du kan bruge formularer til at øge brugerengagementet. Ved at give feedback, når en bruger indtaster ugyldige data, kan du hjælpe med at undgå frustration og forvirring.
Ved at bruge eksterne biblioteker kan du tilføje funktioner såsom autofuldførelse og betingede felter. Disse kan hjælpe med at gøre dine formularer endnu mere brugervenlige. Når de bruges korrekt, kan formularer være et effektivt værktøj til at hjælpe dig med at øge brugerengagementet og indsamle de data, du har brug for.
Udover validering har Next.js mange funktioner, som du kan bruge til at øge brugerengagementet.