Jeste li ikada pokušali poslati obrazac samo da bi vam web-stranica dala poruku o pogrešci koja vam govori da jedno ili više polja nije valjano? Ako je tako, onda ste iskusili provjeru valjanosti obrasca.
Validacija je često neophodna za dobivanje čistih, upotrebljivih podataka. Od adresa e-pošte do datuma, ako treba biti točan, morate ga pažljivo provjeriti.
Što je provjera valjanosti obrasca?
Provjera valjanosti obrasca je postupak kojim se osigurava da su podaci koje je korisnik unio u obrazac točni i potpuni. To možete učiniti na strani klijenta, koristeći ugrađene HTML značajke kao što je traženi atribut. Također možete potvrdite na klijentu koristeći JavaScript, a tu su i vanjske biblioteke Next.js koje olakšavaju proces.
Postoji nekoliko razloga zašto je provjera valjanosti obrazaca neophodna. Prvo, pomaže osigurati da su podaci uneseni u obrazac potpuni i točni. Ovo je važno jer pomaže u sprječavanju pogrešaka kada vaša aplikacija šalje podatke poslužitelju ili bazi podataka.
Drugo, provjera valjanosti obrasca može pomoći u poboljšanju upotrebljivosti obrasca davanjem povratnih informacija kada korisnik unese nevažeće podatke. To može pomoći u izbjegavanju frustracija i zbunjenosti kod korisnika.
Naposljetku, provjera valjanosti obrasca može pomoći u poboljšanju sigurnosti obrasca osiguravajući da šalje samo važeće podatke.
Kako provjeriti valjanost obrazaca u Next.js
Postoje dva načina za provjeru valjanosti obrazaca u Next.js: korištenjem ugrađenih metoda ili korištenjem vanjskih biblioteka.
Korištenje ugrađenih metoda
HTML nudi nekoliko metoda za provjeru valjanosti obrazaca, od kojih je najuobičajenija potreban atribut. Ovo osigurava da polje ne može biti prazno. Ovu metodu možete koristiti iz svoje aplikacije Next.js, jednostavnim uključivanjem atributa u ulazne oznake koje generirate. HTML također nudi a uzorak atribut. Ovo možete koristiti zajedno s a regularni izraz za složeniju provjeru valjanosti.
Ovaj primjer uključuje obrazac s dva polja: ime i e-pošta. Polje imena je obavezno, a polje e-pošte mora odgovarati regularnom izrazu.
uvoz Reagirati iz 'reagirati'razredaMoj obrazacproteže seReagirati.komponenta{
render() {
povratak (
<oblik >
<označiti>
Ime:
<vrsta unosa="tekst" ime="Ime" potrebno />
</label>
<označiti>
Email:
<vrsta unosa="elektronička pošta" ime="elektronička pošta"
uzorak="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<vrsta unosa="podnijeti" vrijednost="podnijeti" />
</form>
)
}
}
izvozzadano Moj obrazac
Ovaj kod uvozi biblioteku React, zatim stvara klasu pod nazivom MyForm i prikazuje element obrasca. Unutar elementa forme nalaze se dva elementa labela.
Prvi element oznake sadrži obavezno polje za unos teksta. Drugi element oznake sadrži polje za unos e-pošte s regularnim izrazom u atributu uzorka.
Konačno, imate gumb za slanje. Kada korisnik pošalje obrazac, obavezni atribut osigurava da je ispunio polje imena. Atribut uzorka polja e-pošte osigurava da je e-pošta u navedenom formatu. Ako bilo koji od ovih uvjeta nije ispunjen, obrazac se neće poslati.
Postoji nekoliko nedostataka korištenja ugrađenih metoda. Prvo, može biti teško pratiti sva različita pravila provjere valjanosti koja ste postavili. Drugo, ako imate puno polja, može biti zamorno dodavati traženi atribut svakom od njih. Na kraju, ugrađene metode pružaju samo osnovnu provjeru valjanosti. Ako želite napraviti složeniju provjeru valjanosti, morat ćete koristiti vanjsku biblioteku.
Korištenje vanjske biblioteke
Uz ugrađene metode, postoje i mnoge vanjske biblioteke koje možete koristiti za provjeru valjanosti obrazaca. Neke popularne biblioteke uključuju Formik, react-hook-form i Yup.
Da biste koristili vanjsku biblioteku, prvo ćete je morati instalirati. Na primjer, da biste instalirali Formik, pokrenite sljedeću naredbu:
npm instalirati formikNakon što instalirate biblioteku, možete je uvesti u svoju komponentu i upotrijebiti za provjeru valjanosti obrasca:
uvoz Reagirati iz 'reagirati'
uvoz { Formik, obrazac, polje } iz 'formik'konst Moj obrazac = () => (
<Formik
početne vrijednosti={{ ime: '', e-mail: '' }}
potvrdi={vrijednosti => {
konst pogreške = {}
ako (!vrijednosti.Ime) {
pogreške.naziv = 'Potreban'
}
ako (!vrijednosti.e-pošta) {
pogreške.e-pošta = 'Potreban'
} drugoako (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (vrijednosti.e-pošta)
) {
pogreške.e-pošta = 'Nevažeća adresa e-pošte'
}
povratak pogreške
}}
onSubmit={(vrijednosti, { setSubmitting}) => {
setTimeout(() => {
upozorenje(JSON.stringify (vrijednosti, ništavan, 2))
setSubmitting(lažno)
}, 400)
}}
>
{({ isSubmitting }) => (
<Oblik>
<Vrsta polja="tekst" ime="Ime" />
<Vrsta polja="elektronička pošta" ime="elektronička pošta" />
<tip gumba="podnijeti" onemogućeno={isSubmitting}>
podnijeti
</button>
</Form>
)}
</Formik>
)
izvozzadano Moj obrazac
Ovdje prvo uvozite Formik, Oblik, i Polje komponente iz biblioteke Formik. Zatim stvorite komponentu pod nazivom MyForm. Ova komponenta prikazuje obrazac koji ima dva polja: ime i e-poštu.
Prop initialValues postavlja početne vrijednosti polja obrasca. U ovom slučaju, polja imena i e-pošte su prazni nizovi.
Potvrđivanje valjanosti postavlja pravila provjere valjanosti za polja obrasca. U ovom slučaju, polje imena je obavezno, a polje e-pošte mora odgovarati regularnom izrazu.
Prop onSubmit postavlja funkciju koju će React pozvati kada korisnik pošalje obrazac. U ovom slučaju, funkcija je upozorenje koje će prikazati vrijednosti polja obrasca.
Potpis isSubmitting određuje da li se obrazac trenutno šalje. U ovom slučaju, postavite ga na false.
Na kraju, renderirajte obrazac pomoću komponente Form iz Formika.
Prednosti korištenja vanjskih biblioteka u Next.js
Postoji nekoliko prednosti korištenja vanjske biblioteke kao što je Formik za provjeru valjanosti obrazaca u Next.js. Jedna prednost je da je mnogo lakše prikazati poruke o pogrešci korisniku. Na primjer, ako obavezno polje nije ispunjeno, Formik će automatski prikazati poruku o pogrešci uključujući predloženi popravak.
Još jedna prednost je da Formik može podnijeti složenija pravila provjere valjanosti. Na primjer, možete koristiti Formik za provjeru jesu li dva polja ista (kao što je lozinka i polje za potvrdu lozinke).
Konačno, Formik olakšava slanje podataka obrasca na poslužitelj. Na primjer, možete koristiti Formik za slanje podataka obrasca u API.
Povećajte angažman korisnika pomoću obrazaca
Možete koristiti obrasce za povećanje angažmana korisnika. Davanjem povratnih informacija kada korisnik unese nevažeće podatke, možete pomoći u izbjegavanju frustracija i zbunjenosti.
Pomoću vanjskih biblioteka možete dodati značajke kao što su automatsko dovršavanje i uvjetna polja. To može pomoći da vaši obrasci budu još lakši za korištenje. Kada se pravilno koriste, obrasci mogu biti moćan alat koji vam pomaže povećati angažman korisnika i prikupiti podatke koji su vam potrebni.
Osim provjere valjanosti, Next.js ima mnogo značajki koje možete koristiti za povećanje angažmana korisnika.