Ați încercat vreodată să trimiteți un formular, doar pentru ca pagina web să vă dea un mesaj de eroare care vă spune că unul sau mai multe dintre câmpuri sunt nevalide? Dacă da, atunci ați experimentat validarea formularelor.

Validarea este adesea esențială pentru a obține date curate și utilizabile. De la adrese de e-mail la date, dacă trebuie să fie exact, trebuie să îl verificați cu atenție.

Ce este validarea formularelor?

Validarea formularului este procesul prin care se asigură că datele introduse într-un formular de către un utilizator sunt corecte și complete. Puteți face acest lucru din partea clientului, folosind funcții HTML încorporate, cum ar fi atributul necesar. Poti de asemenea validați pe client folosind JavaScriptși există biblioteci externe Next.js pentru a facilita procesul.

Există mai multe motive pentru care validarea formularelor este esențială. În primul rând, vă ajută să vă asigurați că datele introduse într-un formular sunt complete și corecte. Acest lucru este important deoarece ajută la prevenirea erorilor atunci când aplicația dvs. trimite date către un server sau o bază de date.

instagram viewer

În al doilea rând, validarea formularului poate ajuta la îmbunătățirea gradului de utilizare a unui formular, oferind feedback atunci când un utilizator introduce date nevalide. Acest lucru poate ajuta la evitarea frustrării și confuziei din partea utilizatorului.

În cele din urmă, validarea formularului poate ajuta la îmbunătățirea securității unui formular, asigurându-se că trimite numai date valide.

Cum se validează formularele în Next.js

Există două moduri de a valida formularele în Next.js: folosind metodele încorporate sau folosind biblioteci externe.

Utilizarea metodelor încorporate

HTML oferă mai multe metode de validare a formularelor, dintre care cea mai comună este necesar atribut. Acest lucru asigură că un câmp nu poate fi gol. Puteți utiliza această metodă din aplicația dvs. Next.js, pur și simplu incluzând atributul în etichetele de intrare pe care le generați. HTML oferă, de asemenea, un model atribut. Puteți folosi acest lucru împreună cu un expresie regulată pentru o validare mai complexă.

Acest exemplu include un formular cu două câmpuri: nume și e-mail. Câmpul de nume este obligatoriu, iar câmpul de e-mail trebuie să se potrivească cu o expresie regulată.

import Reacţiona din 'reacţiona'
clasăMyFormse extindeReacţiona.Componentă{
 randa() {
întoarcere (
<formă >
<eticheta>
 Nume:
<tip de intrare="text" nume="Nume" necesar />
</label>
<eticheta>
 E-mail:
<tip de intrare="e-mail" nume="e-mail"
 model="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<tip de intrare="Trimite" valoare="Trimite" />
</form>
 )
 }
}
exportMod implicit MyForm

Acest cod importă biblioteca React, apoi creează o clasă numită MyForm și redă un element de formular. În interiorul elementului de formular, există două elemente de etichetă.

Primul element de etichetă conține un câmp obligatoriu de introducere a textului. Al doilea element de etichetă conține un câmp de introducere a e-mailului cu o expresie regulată în atributul său model.

În sfârșit, aveți un buton de trimitere. Când un utilizator trimite formularul, atributul necesar asigură că a completat câmpul de nume. Atributul de model al câmpului de e-mail asigură că e-mailul este în formatul specificat. Dacă oricare dintre aceste condiții nu reușește, formularul nu va fi trimis.

Există câteva dezavantaje în utilizarea metodelor încorporate. În primul rând, poate fi dificil să urmăriți toate regulile de validare diferite pe care le-ați configurat. În al doilea rând, dacă aveți o mulțime de câmpuri, poate fi plictisitor să adăugați atributul necesar fiecăruia. În cele din urmă, metodele încorporate oferă doar validare de bază. Dacă doriți să faceți o validare mai complexă, va trebui să utilizați o bibliotecă externă.

Utilizarea unei biblioteci externe

Pe lângă metodele încorporate, există și multe biblioteci externe pe care le puteți utiliza pentru a valida formularele. Unele biblioteci populare includ Formik, react-hook-form și Yup.

Pentru a utiliza o bibliotecă externă, va trebui mai întâi să o instalați. De exemplu, pentru a instala Formik, rulați următoarea comandă:

npm instalare formik

După ce ați instalat biblioteca, o puteți importa în componentă și o puteți utiliza pentru a vă valida formularul:

import Reacţiona din 'reacţiona'
import { Formik, Form, Field } din "formik"
const MyForm = () => (
<Formik
 initialValues={{ nume: '', e-mail: '' }}
 validate={valori => {
const erori = {}
dacă (!valorile.Nume) {
 erori.nume = 'Necesar'
 }
dacă (!valorile.e-mail) {
 erori.email = 'Necesar'
 } altfeldacă (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (valori.email)
 ) {
 erori.email = 'Adresa email invalida'
 }
întoarcere erori
 }}
 onSubmit={(valori, { setSubmitting }) => {
 setTimeout(() => {
 alerta(JSON.stringify (valori, nul, 2))
 setSubmitting(fals)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<Formă>
<Tip câmp="text" nume="Nume" />
<Tip câmp="e-mail" nume="e-mail" />
<tip de buton="Trimite" disabled={isSubmitting}>
 Trimite
</button>
</Form>
 )}
</Formik>
)
exportMod implicit MyForm

Aici, mai întâi importați Formik, Formă, și Camp componente din biblioteca Formik. Apoi, creați o componentă numită MyForm. Această componentă redă un formular care are două câmpuri: nume și e-mail.

Propul initialValues ​​stabilește valorile inițiale ale câmpurilor de formular. În acest caz, câmpurile de nume și de e-mail sunt ambele șiruri goale.

Elementul de validare stabilește regulile de validare pentru câmpurile formularului. În acest caz, câmpul de nume este obligatoriu, iar câmpul de e-mail ar trebui să se potrivească cu o expresie regulată.

Propul onSubmit setează funcția pe care React o va apela atunci când utilizatorul trimite formularul. În acest caz, funcția este o alertă care va afișa valorile câmpurilor de formular.

Propul isSubmitting determină dacă formularul este trimis în prezent. În acest caz, îl setați la fals.

În cele din urmă, redați formularul folosind componenta Form din Formik.

Beneficiile utilizării bibliotecilor externe în Next.js

Există mai multe avantaje în utilizarea unei biblioteci externe, cum ar fi Formik, pentru a valida formularele în Next.js. Un avantaj este că este mult mai ușor să afișați mesaje de eroare utilizatorului. De exemplu, dacă un câmp obligatoriu nu este completat, Formik va afișa automat un mesaj de eroare care include o remediere sugerată.

Un alt avantaj este că Formik poate gestiona reguli de validare mai complexe. De exemplu, puteți utiliza Formik pentru a valida că două câmpuri sunt aceleași (cum ar fi o parolă și un câmp de confirmare a parolei).

În cele din urmă, Formik facilitează trimiterea datelor din formular către un server. De exemplu, puteți utiliza Formik pentru a trimite datele formularului către un API.

Creșteți implicarea utilizatorilor folosind formulare

Puteți folosi formulare pentru a crește implicarea utilizatorilor. Oferind feedback atunci când un utilizator introduce date nevalide, puteți evita frustrarea și confuzia.

Folosind biblioteci externe, puteți adăuga caracteristici precum completarea automată și câmpurile condiționate. Acestea vă pot ajuta să vă faceți formularele și mai ușor de utilizat. Când sunt utilizate corect, formularele pot fi un instrument puternic pentru a vă ajuta să creșteți implicarea utilizatorilor și să colectați datele de care aveți nevoie.

Pe lângă validare, Next.js are multe funcții pe care le puteți folosi pentru a crește implicarea utilizatorilor.