Pokúsili ste sa niekedy odoslať formulár, len aby vám webová stránka zobrazila chybové hlásenie, že jedno alebo viaceré polia sú neplatné? Ak áno, potom ste zažili overenie formulára.

Overenie je často nevyhnutné na získanie čistých a použiteľných údajov. Od e-mailových adries až po dátumy, ak to musí byť presné, musíte to dôkladne skontrolovať.

Čo je overenie formulára?

Overenie formulára je proces, ktorý zabezpečuje, že údaje zadané používateľom do formulára sú správne a úplné. Môžete to urobiť na strane klienta pomocou vstavaných funkcií HTML, ako je požadovaný atribút. Môžete tiež overiť na klientovi pomocou JavaScriptua existujú externé knižnice Next.js, ktoré tento proces zjednodušujú.

Existuje niekoľko dôvodov, prečo je validácia formulára nevyhnutná. Po prvé, pomáha zabezpečiť, aby údaje zadané do formulára boli úplné a správne. Je to dôležité, pretože to pomáha predchádzať chybám, keď vaša aplikácia odosiela údaje na server alebo databázu.

Po druhé, overenie formulára môže pomôcť zlepšiť použiteľnosť formulára poskytnutím spätnej väzby, keď používateľ zadá neplatné údaje. To môže pomôcť vyhnúť sa frustrácii a zmätku na strane používateľa.

instagram viewer

Nakoniec, overenie formulára môže pomôcť zlepšiť bezpečnosť formulára tým, že zabezpečí, aby odosielal iba platné údaje.

Ako overiť formuláre v Next.js

Existujú dva spôsoby overenia formulárov v Next.js: pomocou vstavaných metód alebo pomocou externých knižníc.

Používanie vstavaných metód

HTML poskytuje niekoľko metód na overenie formulárov, z ktorých najbežnejšia je požadovaný atribút. Tým sa zabezpečí, že pole nemôže byť prázdne. Túto metódu môžete použiť z vašej aplikácie Next.js jednoduchým zahrnutím atribútu do vstupných značiek, ktoré vygenerujete. HTML tiež poskytuje a vzor atribút. Môžete ho použiť spolu s a regulárny výraz pre komplexnejšie overenie.

Tento príklad obsahuje formulár s dvoma poľami: meno a e-mail. Pole názvu je povinné a pole e-mailu sa musí zhodovať s regulárnym výrazom.

importovať Reagovať od 'reagovať'
triedaMyFormpredlžujeReagovať.Komponent{
 render() {
vrátiť (
<formulár >
<štítok>
 Názov:
<typ vstupu ="text" meno="názov" požadovaný />
</label>
<štítok>
 Email:
<typ vstupu ="e-mailom" meno="e-mailom"
 vzor ="[a-z0-9._%+-]+@[a-z0-9.-]+\[a-z]{2,}$" />
</label>
<typ vstupu ="Predložiť" hodnota="Predložiť" />
</form>
 )
 }
}
exportpredvolená MyForm

Tento kód importuje knižnicu React, potom vytvorí triedu s názvom MyForm a vykreslí element formulára. Vo vnútri prvku formulára sú dva prvky označenia.

Prvý prvok štítka obsahuje povinné pole na zadávanie textu. Druhý prvok štítka obsahuje pole na zadávanie e-mailu s regulárnym výrazom v atribúte vzor.

Nakoniec máte tlačidlo odoslať. Keď používateľ odošle formulár, povinný atribút zaistí, že vyplnil pole s názvom. Atribút vzoru poľa e-mailu zaisťuje, že e-mail je v špecifikovanom formáte. Ak niektorá z týchto podmienok nesplní, formulár sa neodošle.

Používanie vstavaných metód má niekoľko nevýhod. Po prvé, môže byť ťažké sledovať všetky rôzne pravidlá overovania, ktoré ste nastavili. Po druhé, ak máte veľa polí, môže byť únavné pridať požadovaný atribút do každého z nich. Napokon, vstavané metódy poskytujú iba základné overenie. Ak chcete vykonať komplexnejšiu validáciu, budete musieť použiť externú knižnicu.

Používanie externej knižnice

Okrem vstavaných metód existuje aj veľa externých knižníc, ktoré môžete použiť na overenie formulárov. Niektoré populárne knižnice zahŕňajú Formik, Reag-Hook-form a Yup.

Ak chcete používať externú knižnicu, musíte ju najskôr nainštalovať. Napríklad, ak chcete nainštalovať Formik, spustite nasledujúci príkaz:

npm Inštalácia formik

Po nainštalovaní knižnice ju môžete importovať do svojho komponentu a použiť ju na overenie formulára:

importovať Reagovať od 'reagovať'
importovať { Formik, Form, Field } od "formik"
konšt MyForm = () => (
<Formik
 initialValues={{ meno: '', email: '' }}
 validate={values=> {
konšt chyby = {}
ak (!hodnoty.názov) {
 chyby.meno = 'Požadovaný'
 }
ak (!hodnoty.e-mail) {
 chyby.e-mail = 'Požadovaný'
 } inakak (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
 ) {
 chyby.e-mail = 'neplatná emailová adresa'
 }
vrátiť chyby
 }}
 onSubmit={(hodnoty, { setSubmitting }) => {
 setTimeout(() => {
 upozornenie (JSON.stringify (hodnoty, nulový, 2))
 setSubmitting(falošný)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<Formulár>
<Typ poľa="text" meno="názov" />
<Typ poľa="e-mailom" meno="e-mailom" />
<typ tlačidla ="Predložiť" zakázané={isSubmitting}>
 Predložiť
</button>
</Form>
 )}
</Formik>
)
exportpredvolená MyForm

Tu najskôr naimportujte súbor Formik, Formulár, a Lúka komponenty z knižnice Formik. Ďalej vytvorte komponent s názvom MyForm. Tento komponent vykresľuje formulár, ktorý má dve polia: meno a e-mail.

Prop initialValues ​​nastavuje počiatočné hodnoty polí formulára. V tomto prípade sú polia mena a e-mailu prázdne reťazce.

Prop na validáciu nastavuje pravidlá overovania pre polia formulára. V tomto prípade je pole s názvom povinné a pole e-mailu by sa malo zhodovať s regulárnym výrazom.

Prop onSubmit nastavuje funkciu, ktorú React zavolá, keď používateľ odošle formulár. V tomto prípade je funkciou upozornenie, ktoré zobrazí hodnoty polí formulára.

Podpera isSubmitting určuje, či sa formulár práve odosiela. V tomto prípade ho nastavíte na hodnotu false.

Nakoniec vyrenderujte formulár pomocou komponentu Form z Formik.

Výhody používania externých knižníc v Next.js

Používanie externej knižnice, ako je Formik, na overenie formulárov v Next.js má niekoľko výhod. Jednou z výhod je, že je oveľa jednoduchšie zobraziť chybové hlásenia používateľovi. Napríklad, ak nie je vyplnené povinné pole, Formik automaticky zobrazí chybové hlásenie s návrhom opravy.

Ďalšou výhodou je, že Formik zvládne zložitejšie pravidlá overovania. Formik môžete napríklad použiť na overenie toho, že dve polia sú rovnaké (napríklad pole na potvrdenie hesla a heslo).

Nakoniec, Formik uľahčuje odosielanie údajov formulára na server. Formik môžete napríklad použiť na odoslanie údajov formulára do API.

Zvýšte zapojenie používateľov pomocou formulárov

Na zvýšenie zapojenia používateľov môžete použiť formuláre. Poskytnutím spätnej väzby, keď používateľ zadá neplatné údaje, môžete pomôcť vyhnúť sa frustrácii a zmätku.

Pomocou externých knižníc môžete pridať funkcie, ako je automatické dokončovanie a podmienené polia. Vďaka tomu môžu byť vaše formuláre ešte užívateľsky prívetivejšie. Pri správnom používaní môžu byť formuláre výkonným nástrojom, ktorý vám pomôže zvýšiť zapojenie používateľov a zbierať potrebné údaje.

Okrem overovania má Next.js mnoho funkcií, ktoré môžete použiť na zvýšenie zapojenia používateľov.