Az érvényesítés az adatok helyességét és hiányosságát biztosító folyamat.
Valós példaként tegyünk fel egy olyan webhelyet, amelyhez teljes regisztrációs űrlapot kell kitölteni, mielőtt teljes hozzáférést kapnánk ehhez a webhelyhez. A regisztrációs oldalon megadnák a felhasználónevet, a jelszót, az e-mail azonosítót stb.
Amikor a felhasználó elküldi az űrlapot, általában egy hitelesítés történik először, mielőtt a részleteket elküldenék a szerverre. Ez az érvényesítés a lehető legjobb mértékben próbálja biztosítani, hogy a beviteli mezők részleteit a megfelelő módon írja be.
Például az e-mail azonosítónak mindig a következő formátumban kell lennie: Ez az e-mail cím védett a spam robotoktól. Engedélyezze a Javascript használatát a megtekintéshez. ; ha valaki csak a felhasználónevet írja be az e-mail azonosítóba, akkor ideális esetben az érvényesítés meghiúsul. Tehát az érvényesítés ezen alapvető ellenőrzések elvégzését vizsgálja, mielőtt a részleteket továbbítanák a szerverre további feldolgozás céljából.
Ebben az oktatóanyagban megtanulja-
- Az űrlap érvényesítése HTML5 segítségével
- Az űrlap érvényesítése a $ dirty, $ valid, $ invalid, $ pristine használatával
- Az űrlap érvényesítése az AngularJS Auto Validate segítségével
- Felhasználói visszajelzés a Ladda gombokkal
Az űrlap érvényesítése HTML5 segítségével
Az űrlap érvényesítése az a folyamat, amelynek során a felhasználó előzetesen ellenőrzi a webes űrlapon szereplő információkat, mielőtt azokat elküldenék a kiszolgálóra. Mindig jobb, ha maga az ügyféloldalon érvényesíti az információkat. Ennek oka, hogy kevesebb általános költséget jelent, ha a felhasználónak újra be kellett mutatnia az űrlapot, ha a megadott információk helytelenek voltak.
Vizsgáljuk meg, hogyan lehet az űrlapellenőrzést végrehajtani a HTML5-ben.
Példánkban egy egyszerű regisztrációs űrlapot mutatunk meg a felhasználó számára, amelyben a felhasználónak meg kell adnia olyan részleteket, mint a felhasználónév, jelszó, e-mail azonosító és életkor.
Az űrlapon érvényesítési ellenőrzések vannak, amelyek biztosítják, hogy a felhasználó megfelelő módon adja meg az információkat.
Event Registration Guru99 Global Event
Kód Magyarázat:
- A szövegbeviteli típusnál a „kötelező” attribútumot használjuk. Ez azt jelenti, hogy a szövegdoboz nem lehet üres az űrlap benyújtásakor, és valamilyen szövegnek jelen kell lennie a szövegmezőben.
- A következő beviteli típus a jelszó. Mivel a bemeneti típust jelszóként jelölik meg, amikor a felhasználó bármilyen szöveget beír a mezőbe, az el lesz maszkolva.
- Mivel a beviteltípus e-mailként van megadva, a mező szövegének meg kell egyeznie a mintával. Ez az e-mail cím védett a spam robotoktól. Engedélyezze a Javascript használatát a megtekintéshez. .
- Ha a beviteli típust számként jelöljük meg, ha a felhasználó bármilyen karaktert megpróbál beírni a billentyűzet vagy az ábécé segítségével, akkor az nem kerül be a szövegmezőbe.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Az űrlapellenőrzés működésének megtekintéséhez kattintson a Küldés gombra anélkül, hogy bármilyen információt adna meg a képernyőn.
A beküldés gombra kattintás után megjelenik egy előugró ablak, amely egy érvényesítési hibát mutat, amelyet a mező kitöltésére van szükség.
Tehát a szükség szerint megjelölt vezérlő ellenőrzése a hibaüzenet megjelenését okozza, ha a felhasználó nem ír be értéket a szövegmezőbe.
Amikor a felhasználó bármilyen értéket beír a jelszóvezérlőben, észreveszi a bevitt karakterek elfedésére használt * * szimbólumot.
Ezután írjuk be a rossz e-mail azonosítót, és kattintsunk a küldés gombra. A beküldés gombra kattintás után egy előugró ablak jelenik meg, amely egy olyan érvényesítési hibát mutat, amely szerint a mezőben szerepelnie kell a @ szimbólumnak.
Tehát az e-mail vezérlőként megjelölt vezérlő ellenőrzése a hibaüzenet megjelenését eredményezi, ha a felhasználó nem írja be a megfelelő e-mail azonosítót a szövegmezőbe.
Végül, amikor megpróbál bármilyen karaktert beírni a kor szövegvezérlőjébe, az nem kerül be a képernyőn. A vezérlő csak akkor tölti be az értéket, ha egy számot ad meg a vezérlőben.
Az űrlap érvényesítése a $ dirty, $ valid, $ invalid, $ pristine használatával
Az AngularJS biztosítja további tulajdonságait az érvényesítéshez. Az AngularJS ellenőrzési célokra a következő tulajdonságokat biztosítja a vezérlők számára
- $ dirty - A felhasználó kölcsönhatásba lépett a vezérlővel
- $ valid - A mező tartalma érvényes
- $ érvénytelen - A mező tartalma érvénytelen
- $ pristine - A felhasználó még nem lépett kapcsolatba a vezérlővel
Az alábbiakban bemutatjuk azokat a lépéseket, amelyeket be kell tartani a szögellenőrzés elvégzéséhez.
1. lépés: Az űrlap deklarálásakor használja a no validate tulajdonságot. Ez a tulajdonság azt mondja a HTML5-nek, hogy az érvényesítést az AngularJS végzi.
2. lépés: Győződjön meg arról, hogy az űrlap rendelkezik-e névvel. Ennek az az oka, hogy a szögellenőrzés során az űrlap nevét kell használni.
3. lépés: Győződjön meg arról, hogy minden vezérlőnek meg van határozva a neve. Ennek az az oka, hogy a szögellenőrzés során a vezérlő nevét kell használni.
4. lépés: Az ng-show irányelv segítségével ellenőrizze a vezérlők $ dirty, $ invalid és $ valid tulajdonságait.
Nézzünk meg egy példát, amely magában foglalja a fent említett lépéseket.
Példánkban
Csak egy egyszerű szövegmezőnk lesz, amelyben a felhasználónak be kell írnia a Téma nevét a szövegmezőbe. Ha ez nem történik meg, akkor érvényesítési hiba lép fel, és a hibaüzenet megjelenik a felhasználó számára.
Event Registration Guru99 Global Event
Kód Magyarázat:
- Ne feledje, hogy az űrlapnak nevet adtunk, amely a "myForm". Erre akkor van szükség, amikor az AngularJS érvényesítés űrlapjának vezérlőeleméhez fér hozzá.
- A "novalidate" tulajdonság használata annak biztosítására, hogy a HTML-forma lehetővé tegye az AngularJS számára az érvényesítés elvégzését.
- Az ng-show irányelv segítségével ellenőrizzük a "$ dirty" és a "$ invalid" tulajdonságokat. Ez azt jelenti, hogy ha a szövegdobozt módosították, akkor a "$ dirty" tulajdonság értéke igaz lesz. Továbbá abban az esetben, ha a szövegdoboz értéke nulla, a "$ érvénytelen" tulajdonság igaz lesz. Tehát, ha mindkét tulajdonság igaz, akkor az ellenőrzés nem fog sikerülni a vezérlő számára. Ennélfogva, ha mindkét érték igaz, akkor az ng-show is igaz lesz, és a piros színű karakterekkel ellátott span vezérlés jelenik meg.
- Ebben ellenőrizzük a "$ error" tulajdonságot, amely szintén igaznak minősül, mert a vezérlő számára megemlítettük, hogy az értéket meg kell adni a vezérlő számára. Ilyen esetben, ha nincs adat beírva a mezőbe, a span vezérlő megjeleníti a "Felhasználónév szükséges" szöveget.
- Ha a szövegdoboz vezérlő értéke érvénytelen, akkor a beküldés gombot is le akarjuk tiltani, hogy a felhasználó ne tudja beküldeni az űrlapot. Az "ng-invalid" tulajdonságot használjuk a vezérléshez, hogy ezt a vezérlő "$ dirty" és "$ invalid" tulajdonságának feltételes értéke alapján tegyük meg.
- A vezérlőben éppen a szövegdoboz értékének kezdeti értékét állítjuk be az „AngularJS” szövegre. Ez éppen azért történik, hogy az űrlap első megjelenítésekor beállítson valamilyen alapértelmezett értéket a szövegmezőhöz. Jobban bemutatja, hogyan történik az érvényesítés a szövegmező mezőben.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Az űrlap kezdeti megjelenésekor a szövegdoboz megjeleníti az "AngularJS" értéket, és engedélyezi a "beküldés gombot". Amint eltávolítja a szöveget a vezérlőből, az érvényesítési hibaüzenet engedélyezve van, és a Küldés gomb le van tiltva.
A fenti képernyőkép két dolgot jelenít meg
- A beküldés gomb le van tiltva
- Nincs téma neve a Téma szövegmezőben. Ezért elindítja a "Felhasználónév megadása szükséges" hibaüzenetet.
Az űrlap érvényesítése az AngularJS Auto Validate segítségével
Az AngularJS szolgáltatásban van egy lehetőség, hogy az űrlap összes vezérlőjét automatikusan érvényesítse anélkül, hogy egyedi kódot kellene írnia az érvényesítéshez. Ez úgy valósítható meg, hogy beépít egy "jcs-AutoValidate" nevű egyedi modult.
Ha ez a modul a helyén van, akkor nem kell külön kódot elhelyeznie az ellenőrzés elvégzéséhez vagy a hibaüzenetek megjelenítéséhez. Mindezt a JCS-AutoValidate belső kódja kezeli.
Nézzünk meg egy egyszerű példát ennek elérésére.
Ebben a példában
Csak egy egyszerű űrlapunk lesz egy szövegdoboz-vezérlővel, amely kötelező mező. Ha ez a vezérlő nincs kitöltve, hibaüzenetet kell megjeleníteni.
Event Registration Guru99 Event
Kód Magyarázat:
- Először be kell vonnunk a "jcs-auto-validate.js" szkriptet, amely rendelkezik az összes automatikus ellenőrzési funkcióval.
- Biztosítanunk kell, hogy minden elem, beleértve a "div tag" -et, egy "form-group" osztályba kerüljön.
- Arról is gondoskodni kell, hogy minden elem (ami egy HTML elem, például bemeneti vezérlés, span vezérlés, div vezérlés és így tovább), például a bemeneti vezérlők, szintén a form-group osztályba kerüljenek.
- Helyezze be a jcs-autovalidate-ot az AngularJS JS moduljába.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Alapértelmezés szerint a kód futtatásakor a fenti űrlap a HTML-kód szerint jelenik meg.
Ha megpróbálja elküldeni az űrlapot, a hibaüzenet megjelenik: "Ez a mező kötelező." Mindezt a JCS-AutoValidate opció végzi.
Felhasználói visszajelzések Ladda gombokkal
A "ladda" gombok egy speciális keretrendszer, amely a JavaScript tetején található gombok számára készült, és vizuális hatást kölcsönöz a gomboknak, amikor megnyomják őket.
Tehát, ha egy gomb megkapja a "ladda" attribútumot, és megnyomja, akkor egy spin-effektus jelenik meg. Különböző adatstílusok állnak rendelkezésre a gomb számára, hogy további vizuális effektusokat nyújtson.
Nézzünk meg egy példát arra, hogyan lehet a "ladda" gombokat működés közben látni. Csak egy egyszerű űrlapot fogunk látni, amelyben elküld gomb található. A gomb lenyomásakor a gombon megjelenik egy spin-effektus.
Event Registration Guru99 Event
Kód Magyarázat:
- Az "ng-submit" direktívát használjuk a "submit" nevű függvény meghívására. Ez a függvény a beküldés gomb ladda attribútumának megváltoztatására szolgál.
- A ladda attribútum a ladda keretrendszer speciális attribútuma. Ez az attribútum adja hozzá a spin hatást a kontrollhoz. A ladda attribútum értékét a beküldő változóhoz állítjuk be.
- Az adatstílus tulajdonság ismét egy kiegészítő attribútum, amelyet a ladda keretrendszer kínál, ami csak egy másik vizuális hatást ad hozzá az elküldés gombra.
- Az „AngularJS-ladda” modult hozzá kell adni az AngularJS.JS alkalmazáshoz, hogy a ladda keretrendszer működjön.
- Kezdetben meghatározzuk és hamisra állítjuk az úgynevezett 'beküldés' változó értékét. Ez az érték a beküldés gomb ladda attribútumára van beállítva. Azzal, hogy ezt eredetileg hamisra állítottuk, azt mondjuk, hogy még nem akarjuk, hogy a beküldés gomb Ladda-hatást gyakoroljon.
- Deklarálunk egy függvényt, amelyet a küldés gomb megnyomásakor hívunk meg. Ebben a függvényben a „beküldést” igazra állítjuk. Ez a Ladda effektust alkalmazza a beküldés gombra.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Az űrlap kezdeti megjelenésekor az elküldés gomb megjelenik egyszerű formájában.
A beküldés gomb megnyomásakor a vezérlőben beküldő változó értéke true lesz. Ez az érték a beküldés gomb "ladda" attribútumához kerül, ami a gomb spin-hatását okozza.
Összegzés
- A szövegdoboz HTML-vezérlőinek érvényesítése a „kötelező” attribútum használatával végezhető el.
- A HTML5-ben olyan új vezérlők vannak hozzáadva, mint a jelszó, az e-mail és a szám, amelyek megadják a saját érvényesítési készletüket.
- Az AngularJS-ben történő űrlap-hitelesítést az űrlapvezérlő $ dirty, $ valid, $ érvénytelen és $ érintetlen értékeinek megnézésével vigyázunk.
- Az AngularJS alkalmazások automatikus érvényesítése a JCS-auto validate modul használatával is megvalósítható.
- A Ladda gombok hozzáadhatók az Angular.js alkalmazáshoz, hogy egy kicsit fokozott vizuális érzetet nyújtsanak a felhasználónak a gomb megnyomásakor.