Ste že kdaj poskušali oddati obrazec, a vam je spletna stran prikazala sporočilo o napaki, ki vam sporoča, da eno ali več polj ni veljavnih? Če je tako, potem ste izkusili preverjanje obrazca.
Validacija je pogosto bistvena za pridobivanje čistih, uporabnih podatkov. Od e-poštnih naslovov do datumov, če mora biti točen, ga morate natančno preveriti.
Kaj je preverjanje obrazca?
Preverjanje obrazca je postopek zagotavljanja, da so podatki, ki jih uporabnik vnese v obrazec, pravilni in popolni. To lahko storite na strani odjemalca z uporabo vgrajenih funkcij HTML, kot je zahtevani atribut. Lahko tudi potrdite na odjemalcu z uporabo JavaScripta, obstajajo pa tudi zunanje knjižnice Next.js, ki olajšajo postopek.
Obstaja več razlogov, zakaj je potrditev obrazca bistvena. Prvič, pomaga zagotoviti, da so podatki, vneseni v obrazec, popolni in pravilni. To je pomembno, ker pomaga preprečiti napake, ko vaša aplikacija predloži podatke v strežnik ali zbirko podatkov.
Drugič, preverjanje obrazca lahko pomaga izboljšati uporabnost obrazca z zagotavljanjem povratnih informacij, ko uporabnik vnese neveljavne podatke. To lahko pomaga preprečiti razočaranje in zmedo s strani uporabnika.
Nenazadnje lahko preverjanje obrazca pomaga izboljšati varnost obrazca tako, da zagotovi, da predloži samo veljavne podatke.
Kako preveriti obrazce v Next.js
Obstajata dva načina za preverjanje obrazcev v Next.js: z uporabo vgrajenih metod ali z uporabo zunanjih knjižnic.
Uporaba vgrajenih metod
HTML ponuja več metod za preverjanje obrazcev, od katerih je najpogostejša potrebno atribut. To zagotavlja, da polje ne more biti prazno. To metodo lahko uporabite v aplikaciji Next.js tako, da preprosto vključite atribut v vhodne oznake, ki jih ustvarite. HTML ponuja tudi a vzorec atribut. To lahko uporabite skupaj z a regularni izraz za kompleksnejšo validacijo.
Ta primer vključuje obrazec z dvema poljema: ime in e-pošta. Polje z imenom je obvezno, polje za e-pošto pa se mora ujemati z regularnim izrazom.
uvoz Reagiraj od 'reagirati'razredMyFormse raztezaReagiraj.Komponenta{
render() {
vrnitev (
<oblika >
<oznaka>
ime:
<vrsta vnosa="besedilo" ime="ime" obvezno />
</label>
<oznaka>
E-naslov:
<vrsta vnosa="E-naslov" ime="E-naslov"
vzorec="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<vrsta vnosa="predložiti" vrednost="Predloži" />
</form>
)
}
}
izvozprivzeto MyForm
Ta koda uvozi knjižnico React, nato ustvari razred z imenom MyForm in upodobi element obrazca. Znotraj elementa obrazca sta dva elementa oznake.
Prvi element oznake vsebuje obvezno polje za vnos besedila. Drugi element oznake vsebuje polje za vnos e-pošte z regularnim izrazom v atributu vzorca.
Končno imate gumb za oddajo. Ko uporabnik odda obrazec, zahtevani atribut zagotovi, da je izpolnil polje z imenom. Atribut vzorca e-poštnega polja zagotavlja, da je e-poštno sporočilo v podani obliki. Če kateri koli od teh pogojev ni izpolnjen, obrazec ne bo oddan.
Uporaba vgrajenih metod ima nekaj slabosti. Prvič, lahko je težko slediti vsem različnim pravilom preverjanja, ki ste jih nastavili. Drugič, če imate veliko polj, je dodajanje zahtevanega atributa vsakemu lahko dolgočasno. Nazadnje, vgrajene metode zagotavljajo le osnovno preverjanje veljavnosti. Če želite narediti bolj zapleteno preverjanje veljavnosti, boste morali uporabiti zunanjo knjižnico.
Uporaba zunanje knjižnice
Poleg vgrajenih metod obstaja tudi veliko zunanjih knjižnic, ki jih lahko uporabite za preverjanje obrazcev. Nekatere priljubljene knjižnice vključujejo Formik, react-hook-form in Yup.
Če želite uporabljati zunanjo knjižnico, jo morate najprej namestiti. Če želite na primer namestiti Formik, zaženite naslednji ukaz:
npm namestite formikKo namestite knjižnico, jo lahko uvozite v svojo komponento in jo uporabite za preverjanje obrazca:
uvoz Reagiraj od 'reagirati'
uvoz { Formik, obrazec, polje } od 'formik'konst MyForm = () => (
<Formik
initialValues={{ ime: '', E-naslov: '' }}
validate={values => {
konst napake = {}
če (!vrednote.ime) {
napake.ime = 'Obvezno'
}
če (!vrednote.E-naslov) {
napake.e-pošta = 'Obvezno'
} drugačeče (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
) {
napake.e-pošta = 'Nepravilen e-naslov'
}
vrnitev napake
}}
onSubmit={(vrednosti, { setSubmitting}) => {
setTimeout(() => {
opozorilo(JSON.stringify (vrednosti, nič, 2))
setSubmitting(lažno)
}, 400)
}}
>
{({ isSubmitting }) => (
<Oblika>
<Vrsta polja="besedilo" ime="ime" />
<Vrsta polja="E-naslov" ime="E-naslov" />
<tip gumba="predložiti" onemogočeno={isSubmitting}>
Predloži
</button>
</Form>
)}
</Formik>
)
izvozprivzeto MyForm
Tukaj najprej uvozite Formik, Oblika, in Polje komponente iz knjižnice Formik. Nato ustvarite komponento z imenom MyForm. Ta komponenta upodobi obrazec, ki ima dve polji: ime in e-poštni naslov.
Podstavek initialValues nastavi začetne vrednosti polj obrazca. V tem primeru sta polji ime in e-pošta prazna niza.
Prop validate nastavi pravila preverjanja veljavnosti za polja obrazca. V tem primeru je polje z imenom obvezno, polje za e-pošto pa se mora ujemati z regularnim izrazom.
Prop onSubmit nastavi funkcijo, ki jo bo React poklical, ko uporabnik odda obrazec. V tem primeru je funkcija opozorilo, ki bo prikazalo vrednosti polj obrazca.
Podpora isSubmitting določa, ali se obrazec trenutno pošilja. V tem primeru ga nastavite na false.
Na koncu upodobite obrazec s komponento Form iz Formika.
Prednosti uporabe zunanjih knjižnic v Next.js
Uporaba zunanje knjižnice, kot je Formik, za preverjanje obrazcev v Next.js ima več prednosti. Ena od prednosti je, da je veliko lažje prikazati sporočila o napakah uporabniku. Na primer, če zahtevano polje ni izpolnjeno, bo Formik samodejno prikazal sporočilo o napaki, vključno s predlaganim popravkom.
Druga prednost je, da lahko Formik obravnava bolj zapletena pravila validacije. Formik lahko na primer uporabite za preverjanje, ali sta dve polji enaki (kot sta geslo in polje za potrditev gesla).
Končno Formik olajša pošiljanje podatkov obrazca na strežnik. Formik lahko na primer uporabite za pošiljanje podatkov obrazca v API.
Povečajte angažiranost uporabnikov z uporabo obrazcev
Za povečanje angažiranosti uporabnikov lahko uporabite obrazce. Z zagotavljanjem povratnih informacij, ko uporabnik vnese neveljavne podatke, se lahko izognete frustracijam in zmedi.
Z uporabo zunanjih knjižnic lahko dodate funkcije, kot so samodokončanje in pogojna polja. Ti lahko pomagajo narediti vaše obrazce še bolj uporabniku prijazne. Ob pravilni uporabi so lahko obrazci močno orodje, ki vam pomaga povečati angažiranost uporabnikov in zbrati podatke, ki jih potrebujete.
Poleg preverjanja ima Next.js številne funkcije, ki jih lahko uporabite za povečanje angažiranosti uporabnikov.