Próbált már olyan űrlapot beküldeni, hogy a weboldal hibaüzenetet küldjön Önnek, hogy egy vagy több mező érvénytelen? Ha igen, akkor tapasztalta az űrlap érvényesítését.

Az érvényesítés gyakran elengedhetetlen a tiszta, használható adatok megszerzéséhez. Az e-mail címektől a dátumokig, ha pontosnak kell lennie, gondosan ellenőriznie kell.

Mi az űrlap érvényesítése?

Az űrlapellenőrzés az a folyamat, amely biztosítja, hogy a felhasználó által az űrlapon megadott adatok helyesek és hiánytalanok legyenek. Ezt megteheti a kliens oldalon a beépített HTML-szolgáltatások, például a szükséges attribútum használatával. Te is érvényesítse a kliensen JavaScript használatával, és vannak külső Next.js könyvtárak, amelyek megkönnyítik a folyamatot.

Számos oka van annak, hogy az űrlap érvényesítése elengedhetetlen. Először is segít abban, hogy az űrlapon megadott adatok teljesek és helyesek legyenek. Ez azért fontos, mert segít megelőzni a hibákat, amikor az alkalmazás adatokat küld el egy szerverre vagy adatbázisra.

Másodszor, az űrlapellenőrzés segíthet az űrlapok használhatóságának javításában azáltal, hogy visszajelzést ad, amikor a felhasználó érvénytelen adatokat ad meg. Ez segíthet elkerülni a frusztrációt és a zavartságot a felhasználó részéről.

Végül az űrlapellenőrzés segíthet az űrlapok biztonságának javításában, mivel biztosítja, hogy csak érvényes adatokat küldjön el.

Az űrlapok érvényesítése a Next.js-ben

A Next.js-ben kétféleképpen érvényesítheti az űrlapokat: a beépített metódusokkal vagy külső könyvtárak használatával.

A beépített módszerek használata

A HTML számos módszert kínál az űrlapok érvényesítésére, amelyek közül a leggyakoribb a kívánt tulajdonság. Ez biztosítja, hogy egy mező ne legyen üres. Ezt a módszert a Next.js alkalmazásból is használhatja, ha egyszerűen belefoglalja az attribútumot a létrehozott beviteli címkékbe. A HTML emellett a minta tulajdonság. Ezt együtt használhatja a reguláris kifejezés a bonyolultabb érvényesítés érdekében.

Ez a példa egy űrlapot tartalmaz két mezővel: név és e-mail cím. A név mező kitöltése kötelező, és az e-mail mezőnek egyeznie kell egy reguláris kifejezéssel.

import Reagál tól től 'reagál'
osztályMyFormkiterjedReagál.Összetevő{
 Vakol() {
Visszatérés (
<forma >
<címke>
 Név:
<bemenet típusa="szöveg" név="név" kötelező />
</label>
<címke>
 Email:
<bemenet típusa="email" név="email"
 minta="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<bemenet típusa="Beküldés" érték="Beküldés" />
</form>
 )
 }
}
exportalapértelmezett MyForm

Ez a kód importálja a React könyvtárat, majd létrehoz egy MyForm nevű osztályt, és előállít egy űrlapelemet. Az űrlapelemen belül két címkeelem található.

Az első címkeelem egy kötelező szövegbeviteli mezőt tartalmaz. A második címkeelem egy e-mail beviteli mezőt tartalmaz, amelynek minta attribútuma egy reguláris kifejezést tartalmaz.

Végül van egy küldés gomb. Amikor egy felhasználó elküldi az űrlapot, a kötelező attribútum biztosítja, hogy kitöltse a név mezőt. Az e-mail mező minta attribútuma biztosítja, hogy az e-mail a megadott formátumban legyen. Ha ezen feltételek bármelyike ​​nem teljesít, az űrlapot nem küldi el.

A beépített módszerek használatának van néhány hátránya. Először is, nehéz lehet nyomon követni a különböző beállított érvényesítési szabályokat. Másodszor, ha sok mezője van, fárasztó lehet mindegyikhez hozzáadni a szükséges attribútumot. Végül a beépített metódusok csak alapvető érvényesítést biztosítanak. Ha összetettebb érvényesítést szeretne végezni, akkor külső könyvtárat kell használnia.

Külső könyvtár használata

A beépített metódusokon kívül számos külső könyvtár is használható az űrlapok érvényesítésére. Néhány népszerű könyvtár a Formik, a react-hook-form és a Yup.

Külső könyvtár használatához először telepítenie kell azt. Például a Formik telepítéséhez futtassa a következő parancsot:

npm telepítés formik

Miután telepítette a könyvtárat, importálhatja az összetevőbe, és felhasználhatja az űrlap érvényesítéséhez:

import Reagál tól től 'reagál'
import { Form, Form, Field } tól től "formik"
const Saját űrlap = () => (
<Formik
 kezdetiValues={{ név: '', email: '' }}
 validate={értékek => {
const hibák = {}
ha (!értékeket.név) {
 errors.name = 'Kívánt'
 }
ha (!értékeket.email) {
 errors.email = 'Kívánt'
 } másha (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
 ) {
 errors.email = 'Érvénytelen e-mail cím'
 }
Visszatérés hibákat
 }}
 onSubmit={(értékek, { setSubmitting }) => {
 setTimeout(() => {
 éber(JSON.stringify (értékek, nulla, 2))
 setSubmitting(hamis)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<Forma>
<Mezőtípus="szöveg" név="név" />
<Mezőtípus="email" név="email" />
<gombtípus="Beküldés" letiltva={isSubmitting}>
 Beküldés
</button>
</Form>
 )}
</Formik>
)
exportalapértelmezett MyForm

Itt először importálja a Formik, Forma, és Terület összetevőket a Formik könyvtárból. Ezután hozzon létre egy MyForm nevű összetevőt. Ez az összetevő két mezőt tartalmazó űrlapot jelenít meg: név és e-mail.

A kezdetiValues ​​prop beállítja az űrlapmezők kezdeti értékeit. Ebben az esetben a név és az e-mail mező egyaránt üres karakterlánc.

Az érvényesítési javaslat beállítja az űrlapmezők érvényesítési szabályait. Ebben az esetben a név mező kitöltése kötelező, és az e-mail mezőnek egyeznie kell egy reguláris kifejezéssel.

Az onSubmit javaslat beállítja azt a funkciót, amelyet a React hív meg, amikor a felhasználó elküldi az űrlapot. Ebben az esetben a függvény egy riasztás, amely megjeleníti az űrlapmezők értékeit.

Az isSubmitting javaslat határozza meg, hogy az űrlap beküldése folyamatban van-e. Ebben az esetben hamisra állítja.

Végül jelenítse meg az űrlapot a Formik Form komponensével.

A Next.js külső könyvtárainak használatának előnyei

Számos előnnyel jár egy külső könyvtár, például a Formik használata a Next.js-ben lévő űrlapok érvényesítésére. Egyik előnye, hogy sokkal könnyebben jeleníthetők meg a hibaüzenetek a felhasználónak. Például, ha egy kötelező mező nincs kitöltve, a Formik automatikusan hibaüzenetet jelenít meg, amely tartalmazza a javasolt javítást.

További előny, hogy a Formik bonyolultabb érvényesítési szabályokat is tud kezelni. Például a Formik segítségével ellenőrizheti, hogy két mező megegyezik-e (például egy jelszó és egy jelszómegerősítő mező).

Végül a Formik megkönnyíti az űrlapadatok szerverre való elküldését. Például a Formik segítségével elküldheti az űrlapadatokat egy API-nak.

Növelje a felhasználók elkötelezettségét az űrlapok használatával

Űrlapok segítségével növelheti a felhasználói elköteleződést. Ha visszajelzést ad, amikor a felhasználó érvénytelen adatokat ad meg, segíthet elkerülni a frusztrációt és a zűrzavart.

Külső könyvtárak használatával olyan funkciókat adhat hozzá, mint az automatikus kiegészítés és a feltételes mezők. Ezek segíthetnek még felhasználóbarátabbá tenni az űrlapokat. Helyes használat esetén az űrlapok hatékony eszközt jelenthetnek a felhasználói elköteleződés növelésében és a szükséges adatok összegyűjtésében.

Az érvényesítés mellett a Next.js számos olyan funkcióval rendelkezik, amelyek segítségével növelheti a felhasználói elkötelezettséget.