Validácia je proces zabezpečujúci správnosť a úplnosť údajov.
V príklade zo skutočného sveta predpokladajme web, ktorý vyžaduje úplný registračný formulár pred získaním úplného prístupu na tento web. Registračná stránka by mala vstupné polia pre používateľské meno, heslo, ID e-mailu a tak ďalej.
Keď užívateľ odošle formulár, zvyčajne by najskôr došlo k overeniu pred odoslaním podrobností na server. Táto validácia by sa pokúsila zabezpečiť v najlepšom možnom rozsahu správne zadanie podrobností vstupných polí.
Napríklad e-mailová adresa musí byť vždy vo formáte Táto e-mailová adresa je chránená pred spamovacími robotmi. Ak ju chcete vidieť, musíte mať povolený JavaScript. ; ak niekto zadá do e-mailu iba používateľské meno, potom by ideálne malo zlyhať overenie. Takže overenie sa zameriava na vykonávanie týchto základných kontrol pred odoslaním podrobností na server na ďalšie spracovanie.
V tomto návode sa naučíte
- Overenie formulára pomocou HTML5
- Overenie formulára pomocou $ dirty, $ valid, $ invalid, $ nedotine
- Validácia formulára pomocou funkcie AngularJS Auto Validate
- Spätná väzba používateľov pomocou tlačidiel Ladda
Overenie formulára pomocou HTML5
Validácia formulára je proces predbežnej validácie informácií zadaných používateľom na webovom formulári pred ich odoslaním na server. Vždy je lepšie overiť si informácie na strane klienta. Je to tak preto, lebo ak by zadané informácie boli nesprávne, používateľovi by sa mal formulár opätovne predložiť a tým by sa pridala menšia réžia.
Poďme sa pozrieť na to, ako je možné vykonávať overovanie formulárov v HTML5.
V našom príklade ukážeme používateľovi jeden jednoduchý registračný formulár, do ktorého musí používateľ zadať podrobnosti, ako napríklad používateľské meno, heslo, e-mailovú adresu a vek.
Formulár bude mať kontroly platnosti, aby sa zabezpečilo, že používateľ zadá informácie správnym spôsobom.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- Pre typ zadávania textu používame atribút „required“. To znamená, že textové pole nemôže byť pri odoslaní formulára prázdne a v textovom poli by mal byť nejaký text.
- Ďalším typom vstupu je heslo. Pretože je typ vstupu označený ako heslo, bude používateľ po zadaní ľubovoľného textu do poľa maskovaný.
- Pretože je typ vstupu zadaný ako e-mail, text v poli musí zodpovedať vzoru Táto e-mailová adresa je chránená pred spamovacími robotmi. Ak ju chcete vidieť, musíte mať povolený JavaScript. .
- Ak je typ vstupu označený ako číslo, ak sa používateľ pokúsi zadať ľubovoľný znak pomocou klávesnice alebo abecedy, nebude tento údaj zadaný do textového poľa.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Ak chcete vidieť overenie formulára v akcii, kliknite na tlačidlo Odoslať bez zadania akýchkoľvek informácií na obrazovke.
Po kliknutí na tlačidlo odoslať sa zobrazí vyskakovacie okno s chybou overenia, že je potrebné pole vyplniť.
Takže validácia pre ovládací prvok, ktorý bol označený ako požadovaný, spôsobí, že sa chybové hlásenie zobrazí, ak užívateľ nezadá do textového poľa žiadnu hodnotu.
Keď používateľ zadá do riadenia hesla ľubovoľnú hodnotu, všimnete si symbol '*' používaný na maskovanie zadávaných znakov.
Potom zadajte nesprávne e-mailové ID a kliknite na tlačidlo Odoslať. Po kliknutí na tlačidlo odoslať sa zobrazí vyskakovacie okno s chybou overenia, že v poli musí byť uvedený symbol @.
Takže validácia ovládacieho prvku, ktorý bol označený ako e-mailový ovládací prvok, spôsobí, že sa chybové hlásenie zobrazí, ak používateľ do textového poľa nezadá správne e-mailové ID.
Nakoniec, keď sa pokúsite zadať ľubovoľné znaky do ovládacieho prvku veku, text sa na obrazovku nezadá. Ovládací prvok sa naplní iba hodnotou, keď je do ovládacieho prvku zadané číslo.
Overenie formulára pomocou $ dirty, $ valid, $ invalid, $ nedotine
AngularJS poskytuje svoje ďalšie vlastnosti na overenie. AngularJS poskytuje nasledujúce vlastnosti pre ovládacie prvky na účely overenia
- $ dirty - používateľ interagoval s ovládacím prvkom
- $ valid - obsah poľa je platný
- $ invalid - obsah poľa je neplatný
- $ nedotknutý - používateľ zatiaľ s ovládacím prvkom neinteragoval
Ďalej sú uvedené kroky, ktoré je potrebné vykonať pri vykonaní uhlovej validácie.
Krok 1) Pri deklarovaní formulára použite vlastnosť no validate. Táto vlastnosť povie HTML5, že validáciu vykoná AngularJS.
Krok 2) Zaistite, aby mal formulár definovaný názov. Dôvodom je to, že pri vykonávaní uhlovej validácie sa použije názov formulára.
Krok 3) Zaistite, aby mal každý ovládací prvok tiež definovaný názov. Dôvodom je to, že pri vykonávaní uhlovej validácie sa použije názov ovládacieho prvku.
Krok 4) Pomocou smernice ng-show skontrolujte vlastnosti $ dirty, $ invalid a $ valid pre ovládacie prvky.
Pozrime sa na príklad, ktorý zahŕňa vyššie uvedené kroky.
V našom príklade
Len budeme mať jednoduché textové pole, do ktorého musí používateľ zadať názov témy do textového poľa. Ak to neurobíte, spustí sa chyba overenia a chybové hlásenie sa zobrazí používateľovi.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- Upozorňujeme, že sme názov formulára pomenovali „myForm“. Toto sa vyžaduje pri prístupe k ovládacím prvkom vo formulári na overenie AngularJS.
- Použitie vlastnosti „novalidate“ na zabezpečenie toho, aby formulár HTML umožnil AngularJS vykonať validáciu.
- Na kontrolu vlastností „$ dirty“ a „$ invalid“ používame direktívu ng-show. To znamená, že ak bolo textové pole upravené, potom bude hodnota vlastnosti „$ dirty“ pravdivá. V prípade, že hodnota textového poľa je null, vlastnosť „$ invalid“ sa stane pravdivou. Takže ak sú obidve vlastnosti pravdivé, potom overenie zlyhá pre ovládací prvok. Ak sú teda obidve hodnoty pravdivé, stane sa pravdivou aj ng-show a zobrazí sa ovládací prvok rozsahu s červenými znakmi.
- V tomto kontrolujeme vlastnosť „$ error“, ktorá sa tiež vyhodnocuje ako true, pretože pre ovládací prvok sme uviedli, že pre ovládací prvok by mala byť zadaná hodnota. V takom prípade, ak v textovom poli nie sú zadané žiadne údaje, ovládací prvok rozpätia zobrazí text „Vyžaduje sa používateľské meno“.
- Ak je hodnota ovládacieho prvku textového poľa neplatná, chceme tiež deaktivovať tlačidlo odosielania, aby používateľ nemohol odoslať formulár. Používame vlastnosť „ng-disabled“ na to, aby to ovládací prvok urobil na základe podmienenej hodnoty vlastnosti „$ dirty“ a „$ invalid“ ovládacieho prvku.
- V ovládači práve nastavujeme počiatočnú hodnotu hodnoty textového poľa na text „AngularJS“. Toto sa práve robí, aby sa pri prvom zobrazení formulára nastavila nejaká predvolená hodnota pre textové pole. Lepšie ukazuje, ako prebieha overovanie poľa textového poľa.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Pri prvom zobrazení formulára sa v textovom poli zobrazí hodnota „AngularJS“ a je povolené tlačidlo „odoslať“. Hneď ako odstránite text z ovládacieho prvku, chybové hlásenie o overení sa povolí a tlačidlo Odoslať sa deaktivuje.
Vyššie uvedená snímka obrazovky zobrazuje dve veci
- Tlačidlo Odoslať je zakázané
- V textovom poli Téma nie je zadaný žiadny názov. Preto spustí chybové hlásenie „Vyžaduje sa používateľské meno“.
Validácia formulára pomocou funkcie AngularJS Auto Validate
V AngularJS existuje zariadenie na automatické overenie všetkých ovládacích prvkov vo formulári bez potreby písania vlastného kódu na overenie. To sa dá dosiahnuť zahrnutím vlastného modulu s názvom „jcs-AutoValidate“.
Keď je tento modul zavedený, nemusíte na vykonávanie overovania ani na zobrazovanie chybových správ vkladať žiadny špeciálny kód. To všetko rieši kód vo vnútri JCS-AutoValidate.
Pozrime sa na jednoduchý príklad, ako to dosiahnuť.
V tomto príklade
Budeme mať jednoduchý formulár s ovládacím prvkom textového poľa, čo je povinné pole. Ak tento ovládací prvok nie je vyplnený, malo by sa zobraziť chybové hlásenie.
Event Registration Guru99 Event
Vysvetlenie kódu:
- Najprv musíme zahrnúť skript „jcs-auto-validate.js“, ktorý má všetky funkcie automatického overovania.
- Musíme zabezpečiť, aby bol každý prvok vrátane značky „div“ umiestnený v triede „form-group“.
- Tiež je potrebné zabezpečiť, aby každý prvok (ktorý je prvkom HTML, napríklad vstupný ovládací prvok, ovládací prvok rozpätia, ovládací prvok div atď.), Ako napríklad vstupné ovládací prvky, bol tiež umiestnený v triede skupiny formulárov.
- Zahrňte jcs-autovalidate do svojho modulu AngularJS JS.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
V predvolenom nastavení sa pri spustení kódu vyššie uvedený formulár zobrazí podľa kódu HTML.
Ak sa pokúsite odoslať formulár, zobrazí sa chybové hlásenie „Toto pole je povinné.“ To všetko sa deje pomocou voľby JCS-AutoValidate.
Spätné väzby používateľov pomocou tlačidiel Ladda
Tlačidlá „ladda“ sú špeciálnym rámcom vytvoreným pre tlačidlá nad jazykom JavaScript, ktoré pri stlačení poskytujú vizuálny efekt tlačidlám.
Takže ak má tlačidlo priradený atribút „ladda“ a je stlačené, zobrazí sa efekt odstreďovania. Pre tlačidlo sú k dispozícii aj rôzne štýly údajov, ktoré poskytujú ďalšie vizuálne efekty.
Pozrime sa na príklad, ako vidieť tlačidlá „ladda“ v akcii. Uvidíme iba jednoduchý formulár, ktorý má tlačidlo na odoslanie. Po stlačení tlačidla sa na tlačidle zobrazí efekt odstreďovania.
Event Registration Guru99 Event
Vysvetlenie kódu:
- Na volanie funkcie s názvom „odovzdať“ používame smernicu „ng-submit“. Táto funkcia sa použije na zmenu atribútu ladda tlačidla odoslať.
- Atribút ladda je špeciálny atribút rámca ladda. Je to tento atribút, ktorý dodáva ovládaniu efekt rotácie. Nastavujeme hodnotu atribútu ladda na premennú submission.
- Vlastnosť dátového štýlu je opäť ďalším atribútom, ktorý ponúka rámec ladda, ktorý iba pridáva iný vizuálny efekt tlačidlu odoslania.
- Aby modul ladda fungoval, je potrebné do aplikácie AngularJS.JS pridať modul „AngularJS-ladda“.
- Spočiatku definujeme a nastavujeme hodnotu premennej nazvanej „odosielanie“ na hodnotu false. Táto hodnota je nastavená pre atribút ladda tlačidla odoslať. Pôvodným nastavením tohto parametra na hodnotu False hovoríme, že zatiaľ nechceme, aby malo tlačidlo Odoslať efekt ladda.
- Deklarujeme funkciu, ktorá sa vyvolá po stlačení tlačidla Odoslať. V tejto funkcii nastavujeme „odovzdanie“ na true. To spôsobí, že sa na tlačidlo odoslať použije efekt ladda.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Pri prvom zobrazení formulára sa tlačidlo odoslania zobrazí v jednoduchej podobe.
Po stlačení tlačidla na odoslanie sa premenná na odoslanie v ovládači nastaví na hodnotu true. Táto hodnota sa odovzdá atribútu „ladda“ tlačidla na odoslanie, čo spôsobí efekt rotácie tlačidla.
Zhrnutie
- Overenie ovládacích prvkov HTML textového poľa je možné vykonať pomocou atribútu 'required'.
- V HTML5 sú pridané nové ovládacie prvky, ako napríklad heslo, e-mail a číslo, ktoré poskytujú vlastnú sadu overení.
- O overenie formulára v AngularJS sa stará pohľad na hodnoty $ dirty, $ valid, $ invalid a $ nedotčené hodnoty ovládacieho prvku formulára.
- Automatické overenie v aplikáciách AngularJS je možné dosiahnuť aj použitím modulu JCS-auto validate.
- K aplikácii Angular.js je možné pridať tlačidlá Ladda, ktoré po stlačení tlačidla poskytnú používateľovi trochu vylepšený vizuálny dojem.