Ověření je proces zajišťující správnost a úplnost údajů.
V reálném příkladu předpokládejme web, který vyžaduje vyplnění registračního formuláře před získáním plného přístupu k tomuto webu. Registrační stránka by měla vstupní pole pro uživatelské jméno, heslo, ID e-mailu a tak dále.
Když uživatel odešle formulář, obvykle by nejprve došlo k ověření před odesláním podrobností na server. Toto ověření by se pokusilo zajistit v nejlepším možném rozsahu, aby byly podrobnosti vstupních polí zadány správným způsobem.
Například e-mailová adresa musí být vždy ve formátu Tato e-mailová adresa je chráněna před spamboty. Abyste ji mohli zobrazit, musíte mít povolený JavaScript. ; pokud někdo zadá do e-mailu pouze uživatelské jméno, pak by v ideálním případě mělo ověření selhat. Ověření tedy zkoumá provádění těchto základních kontrol před odesláním podrobností na server k dalšímu zpracování.
V tomto výukovém programu se naučíte
- Ověření formuláře pomocí HTML5
- Ověření formuláře pomocí $ dirty, $ valid, $ invalid, $ nedotine
- Ověření formuláře pomocí funkce AngularJS Auto Validate
- Zpětná vazba uživatele pomocí tlačítek Ladda
Ověření formuláře pomocí HTML5
Ověření formuláře je proces předběžného ověření informací zadaných na webovém formuláři uživatelem před jejich odesláním na server. Je vždy lepší ověřit informace na straně klienta samotné. Důvodem je, že přidává méně režijních nákladů, pokud by uživateli bylo nutné znovu předložit formulář, pokud byly zadané informace nesprávné.
Pojďme se podívat na to, jak lze provádět ověřování formulářů v HTML5.
V našem příkladu ukážeme uživateli jeden jednoduchý registrační formulář, do kterého musí uživatel zadat podrobnosti, jako je uživatelské jméno, heslo, e-mail a věk.
Formulář bude mít ovládací prvky pro ověření, aby bylo zajištěno, že uživatel zadá informace správným způsobem.
Event Registration Guru99 Global Event
Vysvětlení kódu:
- Pro typ zadávání textu používáme atribut „required“. To znamená, že textové pole nemůže být při odeslání formuláře prázdné a v textovém poli by měl být nějaký text.
- Dalším typem vstupu je heslo. Jelikož je typ vstupu označen jako heslo, bude uživatel při zadávání jakéhokoli textu do pole maskován.
- Protože je typ vstupu zadán jako e-mail, musí text v poli odpovídat vzoru Tato e-mailová adresa je chráněna před spamboty. Abyste ji mohli zobrazit, musíte mít povolený JavaScript. .
- Pokud je typ vstupu označen jako číslo, pokud se uživatel pokusí zadat libovolný znak pomocí klávesnice nebo abecedy, nebude do textového pole zadán.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Chcete-li zobrazit ověření formuláře v akci, klikněte na tlačítko Odeslat bez zadání jakýchkoli informací na obrazovce.
Po kliknutí na tlačítko Odeslat se zobrazí vyskakovací okno s chybou ověření, že je třeba pole vyplnit.
Takže ověření pro ovládací prvek, který byl označen jako požadovaný, způsobí, že se chybová zpráva zobrazí, pokud uživatel nezadá do textového pole žádnou hodnotu.
Když uživatel zadá jakoukoli hodnotu v ovládacím prvku hesla, všimnete si symbolu '*' použitého k maskování zadávaných znaků.
Potom zadejte nesprávné e-mailové ID a klikněte na tlačítko Odeslat. Po kliknutí na tlačítko Odeslat se zobrazí vyskakovací okno s chybou ověření, že pole musí mít symbol @.
Takže ověření ovládacího prvku, který byl označen jako e-mailový ovládací prvek, způsobí, že se chybová zpráva zobrazí, pokud uživatel do textového pole nezadá správné e-mailové ID.
Nakonec, když se pokusíte zadat libovolné znaky do ovládacího prvku věkového textu, nebude to na obrazovce zadáno. Ovládací prvek se naplní pouze hodnotou, když je do ovládacího prvku zadáno číslo.
Ověření formuláře pomocí $ dirty, $ valid, $ invalid, $ nedotine
AngularJS poskytuje své další vlastnosti pro ověření. AngularJS poskytuje následující vlastnosti pro ovládací prvky pro účely ověření
- $ dirty - Uživatel interagoval s ovládacím prvkem
- $ valid - obsah pole je platný
- $ invalid - obsah pole je neplatný
- $ pristine - Uživatel zatím s ovládacím prvkem neinteragoval
Níže jsou kroky, které je třeba dodržet při provádění úhlové validace.
Krok 1) Při deklaraci formuláře použijte vlastnost no validate. Tato vlastnost říká HTML5, že ověření bude provedeno AngularJS.
Krok 2) Zajistěte, aby měl formulář definovaný název. Důvodem je to, že při provádění úhlové validace bude použit název formuláře.
Krok 3) Zajistěte, aby měl každý ovládací prvek také definovaný název. Důvodem je to, že při provádění úhlové validace bude použit název ovládacího prvku.
Krok 4) Použijte direktivu ng-show ke kontrole vlastností $ dirty, $ invalid a $ valid pro ovládací prvky.
Podívejme se na příklad, který zahrnuje výše uvedené kroky.
V našem příkladu
Prostě budeme mít jednoduché textové pole, do kterého musí uživatel do textového pole zadat název tématu. Pokud tak neučiníte, spustí se chyba ověření a uživateli se zobrazí chybová zpráva.
Event Registration Guru99 Global Event
Vysvětlení kódu:
- Všimněte si, že jsme pojmenovali formulář, který je „myForm“. To je vyžadováno při přístupu k ovládacím prvkům ve formuláři pro ověření AngularJS.
- Použití vlastnosti „novalidate“ k zajištění toho, aby formulář HTML umožnil AngularJS provést ověření.
- Ke kontrole vlastností „$ dirty“ a „$ invalid“ používáme direktivu ng-show. To znamená, že pokud bylo textové pole změněno, bude hodnota vlastnosti „$ dirty“ pravdivá. V případě, že je hodnota textového pole null, vlastnost „$ invalid“ se stane pravdivou. Takže pokud jsou obě vlastnosti pravdivé, pak se ověření u ovládacího prvku nezdaří. Pokud jsou tedy obě hodnoty pravdivé, stane se ng-show také pravdivou a zobrazí se ovládací prvek rozpětí se znaky červené barvy.
- V tomto kontrolujeme vlastnost „$ error“, která se také vyhodnotí jako true, protože jsme pro ovládací prvek uvedli, že by měla být pro ovládací prvek zadána hodnota. V takovém případě, pokud v textovém poli nejsou zadána žádná data, ovládací prvek rozpětí zobrazí text „Je požadováno uživatelské jméno“.
- Pokud je hodnota ovládacího prvku textového pole neplatná, chceme také deaktivovat tlačítko Odeslat, aby uživatel nemohl odeslat formulář. K tomu používáme vlastnost „ng-disabled“ pro ovládací prvek na základě podmíněné hodnoty vlastnosti „$ dirty“ a „$ invalid“ ovládacího prvku.
- V řadiči právě nastavujeme počáteční hodnotu hodnoty textového pole na text 'AngularJS'. Právě se provádí nastavení nějaké výchozí hodnoty do textového pole při prvním zobrazení formuláře. Lepší ukázky toho, jak k ověření dojde pro pole textového pole.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Při prvním zobrazení formuláře se v textovém poli zobrazí hodnota „AngularJS“ a je povoleno „tlačítko odeslat“. Jakmile odstraníte text z ovládacího prvku, je povolena chybová zpráva o ověření a tlačítko Odeslat je zakázáno.
Výše uvedený snímek obrazovky zobrazuje dvě věci
- Tlačítko Odeslat je deaktivováno
- V textovém poli Téma není žádný název tématu. Proto vypálí chybovou zprávu „Je požadováno uživatelské jméno.“
Ověření formuláře pomocí funkce AngularJS Auto Validate
V AngularJS je zařízení k automatickému ověření všech ovládacích prvků ve formuláři bez nutnosti psát vlastní kód pro ověření. Toho lze dosáhnout zahrnutím vlastního modulu s názvem „jcs-AutoValidate“.
Když je tento modul zaveden, nemusíte k provádění ověření nebo zobrazování chybových zpráv vkládat žádný speciální kód. To vše zpracovává kód uvnitř JCS-AutoValidate.
Podívejme se na jednoduchý příklad, jak toho dosáhnout.
V tomto příkladu
Budeme mít jednoduchý formulář s ovládacím prvkem textového pole, což je povinné pole. Pokud tento ovládací prvek není vyplněn, měla by se zobrazit chybová zpráva.
Event Registration Guru99 Event
Vysvětlení kódu:
- Nejprve musíme zahrnout skript „jcs-auto-validate.js“, který má všechny funkce automatického ověřování.
- Musíme zajistit, aby každý prvek včetně značky „div“ byl umístěn ve třídě „form-group“.
- Také je třeba zajistit, aby každý prvek (který je prvkem HTML, jako je vstupní ovládací prvek, ovládací prvek rozpětí, ovládací prvek div atd.), Jako jsou vstupní ovládací prvky, byl také umístěn ve třídě skupiny formulářů.
- Zahrňte do svého modulu AngularJS JS jcs-autovalidate.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Ve výchozím nastavení se při spuštění kódu výše uvedený formulář zobrazí podle kódu HTML.
Pokud se pokusíte odeslat formulář, zobrazí se chybová zpráva „Toto pole je povinné.“ To vše se provádí pomocí volby JCS-AutoValidate.
Zpětné vazby uživatelů pomocí tlačítek Ladda
Tlačítka „ladda“ jsou speciální rámce vytvořené pro tlačítka v horní části JavaScriptu, která poskytují vizuální efekt tlačítkům při jejich stisknutí.
Pokud tedy má tlačítko atribut „ladda“ a je stisknuto, zobrazí se efekt rotace. Pro tlačítko jsou k dispozici také různé datové styly, které poskytují další vizuální efekty.
Podívejme se na příklad, jak vidět tlačítka „ladda“ v akci. Uvidíme pouze jednoduchý formulář, který má tlačítko Odeslat. Po stisknutí tlačítka se na tlačítku zobrazí efekt odstřeďování.
Event Registration Guru99 Event
Vysvětlení kódu:
- K volání funkce s názvem „odeslat“ používáme směrnici „ng-submit“. Tato funkce se použije ke změně atributu ladda tlačítka Odeslat.
- Atribut ladda je speciální atribut rámce ladda. Je to tento atribut, který přidává efekt rotace ke kontrole. Nastavujeme hodnotu atributu ladda na proměnnou odeslání.
- Vlastnost datového stylu je opět dalším atributem nabízeným ladda frameworkem, který pouze přidává jiný vizuální efekt tlačítku odeslání.
- Aby modul ladda fungoval, je třeba do aplikace AngularJS.JS přidat modul „AngularJS-ladda“.
- Zpočátku definujeme a nastavujeme hodnotu proměnné zvané „odesílání“ na hodnotu false. Tato hodnota je nastavena pro atribut ladda tlačítka Odeslat. Počáteční nastavením na hodnotu false říkáme, že zatím nechceme, aby tlačítko Odeslat mělo ladda efekt.
- Deklarujeme funkci, která se volá po stisknutí tlačítka Odeslat. V této funkci nastavujeme „odesílání“ na true. To způsobí, že efekt ladda bude použit na tlačítko Odeslat.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Když je formulář původně zobrazen, tlačítko Odeslat se zobrazí v jeho jednoduché formě.
Po stisknutí tlačítka pro odeslání je proměnná pro odesílání v řadiči nastavena na hodnotu true. Tato hodnota se předá atributu „ladda“ tlačítka Odeslat, což způsobí efekt otočení tlačítka.
souhrn
- Ověření ovládacích prvků HTML textového pole lze provést pomocí atributu „required“.
- V HTML5 jsou přidány nové ovládací prvky, jako je heslo, e-mail a číslo, které poskytují vlastní sadu ověřování.
- O ověření formuláře v AngularJS se postaráme pohledem na hodnoty $ dirty, $ valid, $ invalid a $ pristine ovládacího prvku formuláře.
- Automatické ověřování v aplikacích AngularJS lze dosáhnout také pomocí modulu JCS-auto validate.
- K aplikaci Angular.js lze přidat tlačítka Ladda, která uživateli po stisknutí tlačítka poskytnou trochu lepší vizuální dojem.