Zkusili jste někdy odeslat formulář, pouze aby vám webová stránka zobrazila chybovou zprávu, že jedno nebo více polí je neplatné? Pokud ano, pak jste se setkali s ověřováním formuláře.

Ověření je často nezbytné pro získání čistých a použitelných dat. Od e-mailových adres po data, pokud to musí být přesné, musíte to pečlivě zkontrolovat.

Co je ověření formuláře?

Ověření formuláře je proces, který zajišťuje správnost a úplnost údajů zadaných uživatelem do formuláře. Můžete to udělat na straně klienta pomocí vestavěných funkcí HTML, jako je požadovaný atribut. Můžete také ověřit na klientovi pomocí JavaScriptua existují externí knihovny Next.js, které tento proces usnadňují.

Existuje několik důvodů, proč je ověření formuláře zásadní. Za prvé pomáhá zajistit, aby údaje zadané do formuláře byly úplné a správné. To je důležité, protože to pomáhá předcházet chybám, když vaše aplikace odesílá data na server nebo do databáze.

Za druhé, ověření formuláře může pomoci zlepšit použitelnost formuláře poskytnutím zpětné vazby, když uživatel zadá neplatná data. To může pomoci vyhnout se frustraci a zmatku na straně uživatele.

instagram viewer

A konečně, ověření formuláře může pomoci zlepšit zabezpečení formuláře tím, že zajistí, že bude odesílat pouze platná data.

Jak ověřit formuláře v Next.js

Existují dva způsoby, jak ověřit formuláře v Next.js: pomocí vestavěných metod nebo pomocí externích knihoven.

Použití vestavěných metod

HTML poskytuje několik metod pro ověřování formulářů, z nichž nejběžnější je Požadované atribut. Tím je zajištěno, že pole nemůže být prázdné. Tuto metodu můžete použít z vaší aplikace Next.js jednoduše tak, že atribut zahrnete do vstupních značek, které vygenerujete. HTML také poskytuje a vzor atribut. Můžete jej použít společně s a regulární výraz pro složitější ověření.

Tento příklad obsahuje formulář se dvěma poli: jméno a e-mail. Pole jména je povinné a pole e-mailu musí odpovídat regulárnímu výrazu.

import Reagovat z 'reagovat'
třídaMůj formulářrozšiřujeReagovat.Komponent{
 poskytnout() {
vrátit se (
<formulář >
<označení>
 Název:
<typ vstupu ="text" jméno="název" Požadované />
</label>
<označení>
 E-mailem:
<typ vstupu ="e-mailem" jméno="e-mailem"
 vzor="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<typ vstupu ="Předložit" hodnota="Předložit" />
</form>
 )
 }
}
vývoznívýchozí Můj formulář

Tento kód importuje knihovnu React, poté vytvoří třídu s názvem MyForm a vykreslí element formuláře. Uvnitř prvku formuláře jsou dva prvky štítku.

První prvek štítku obsahuje povinné pole pro zadání textu. Druhý prvek štítku obsahuje vstupní pole e-mailu s regulárním výrazem v atributu pattern.

Nakonec máte tlačítko Odeslat. Když uživatel odešle formulář, povinný atribut zajistí, že vyplnil pole pro jméno. Atribut vzoru pole e-mailu zajišťuje, že e-mail je v určeném formátu. Pokud některá z těchto podmínek nesplní, formulář se neodešle.

Použití vestavěných metod má několik nevýhod. Za prvé, může být obtížné sledovat všechna různá ověřovací pravidla, která jste nastavili. Za druhé, pokud máte hodně polí, může být únavné přidávat požadovaný atribut do každého z nich. A konečně, vestavěné metody poskytují pouze základní ověření. Pokud chcete provést složitější ověření, budete muset použít externí knihovnu.

Použití externí knihovny

Kromě vestavěných metod existuje také mnoho externích knihoven, které můžete použít k ověření formulářů. Některé populární knihovny zahrnují Formik, Reagovat-hook-form a Yup.

Chcete-li používat externí knihovnu, musíte ji nejprve nainstalovat. Chcete-li například nainstalovat Formik, spusťte následující příkaz:

npm Nainstalujte formik

Jakmile knihovnu nainstalujete, můžete ji importovat do své komponenty a použít ji k ověření formuláře:

import Reagovat z 'reagovat'
import { Formik, Form, Field } z 'formik'
konst MůjFormulář = () => (
<Formik
 initialValues={{ název: '', e-mailem: '' }}
 validate={values ​​=> {
konst chyby = {}
-li (!hodnoty.název) {
 chyby.jméno = 'Požadované'
 }
-li (!hodnoty.e-mailem) {
 chyby.e-mail = 'Požadované'
 } jiný-li (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
 ) {
 chyby.e-mail = 'neplatná emailová adresa'
 }
vrátit se chyby
 }}
 onSubmit={(hodnoty, { setSubmitting }) => {
 setTimeout(() => {
 upozornění (JSON.stringify (hodnoty, nula, 2))
 setSubmitting(Nepravdivé)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<Formulář>
<Typ pole="text" jméno="název" />
<Typ pole="e-mailem" jméno="e-mailem" />
<typ tlačítka ="Předložit" vypnuto={isSubmitting}>
 Předložit
</button>
</Form>
 )}
</Formik>
)
vývoznívýchozí Můj formulář

Zde nejprve importujte Formik, Formulář, a Pole komponenty z knihovny Formik. Dále vytvořte komponentu s názvem MyForm. Tato komponenta vykreslí formulář, který má dvě pole: jméno a e-mail.

Prop initialValues ​​nastavuje počáteční hodnoty polí formuláře. V tomto případě jsou pole jména a e-mailu prázdnými řetězci.

Prop validate nastavuje pravidla ověřování pro pole formuláře. V tomto případě je pole pro jméno povinné a pole e-mailu by mělo odpovídat regulárnímu výrazu.

Prop onSubmit nastavuje funkci, kterou React zavolá, když uživatel odešle formulář. V tomto případě je funkcí upozornění, které zobrazí hodnoty polí formuláře.

Prop isSubmitting určuje, zda je formulář aktuálně odesílán. V tomto případě jej nastavíte na hodnotu false.

Nakonec vyrenderujte formulář pomocí komponenty Form z Formik.

Výhody používání externích knihoven v Next.js

Používání externí knihovny, jako je Formik, k ověřování formulářů v Next.js má několik výhod. Jednou z výhod je, že je mnohem snazší zobrazovat chybové zprávy uživateli. Pokud například není vyplněno povinné pole, Formik automaticky zobrazí chybovou zprávu včetně navrhované opravy.

Další výhodou je, že Formik si poradí se složitějšími ověřovacími pravidly. Formik můžete například použít k ověření, že jsou dvě pole stejná (jako je heslo a pole pro potvrzení hesla).

A konečně, Formik usnadňuje odeslání dat formuláře na server. Formik můžete například použít k odeslání dat formuláře do API.

Zvyšte zapojení uživatelů pomocí formulářů

Pomocí formulářů můžete zvýšit zapojení uživatelů. Poskytnutím zpětné vazby, když uživatel zadá neplatná data, můžete pomoci vyhnout se frustraci a zmatku.

Pomocí externích knihoven můžete přidat funkce, jako je automatické dokončování a podmíněná pole. Díky tomu mohou být vaše formuláře ještě uživatelsky přívětivější. Při správném použití mohou být formuláře mocným nástrojem, který vám pomůže zvýšit zapojení uživatelů a shromažďovat data, která potřebujete.

Kromě ověřování má Next.js mnoho funkcí, které můžete použít ke zvýšení zapojení uživatelů.