Validacija je postopek, ki zagotavlja pravilnost in popolnost podatkov.
V resničnem primeru predpostavimo spletno mesto, ki zahteva izpolnitev obrazca za registracijo, preden dobi popoln dostop do tega spletnega mesta. Na strani za registracijo bi bila vnosna polja za uporabniško ime, geslo, e-poštni ID itd.
Ko uporabnik odda obrazec, se običajno najprej izvede potrditev, preden se podrobnosti pošljejo strežniku. Ta potrditev bi poskušala v največji možni meri zagotoviti, da so podrobnosti za vnosna polja vnesene na pravilen način.
Na primer, e-poštni ID mora biti vedno v obliki tega e-poštnega naslova je zaščiten pred neželeno pošto. Če ga želite videti, omogočite Javascript. ; če nekdo v e-poštni ID vnese samo uporabniško ime, potem v idealnem primeru preverjanje veljavnosti ne bi uspelo. Torej preverjanje veljavnosti opravi ta osnovna preverjanja, preden se podrobnosti pošljejo strežniku v nadaljnjo obdelavo.
V tej vadnici boste izvedeli-
- Preverjanje obrazca z uporabo HTML5
- Preverjanje obrazca z uporabo $ dirty, $ valid, $ invalid, $ pristine
- Potrditev obrazca z uporabo samodejnega preverjanja veljavnosti AngularJS
- Povratne informacije uporabnikov z gumbi Ladda
Preverjanje obrazca z uporabo HTML5
Preverjanje obrazca je postopek predhodnega preverjanja veljavnosti informacij, ki jih uporabnik vnese v spletni obrazec, preden jih pošlje strežniku. Informacije je vedno bolje preveriti na strani odjemalca. To pa zato, ker doda manj režijskih stroškov, če je bilo treba uporabniku znova predstaviti obrazec, če so bili vneseni podatki napačni.
Oglejmo si, kako je mogoče v HTML5 izvesti preverjanje obrazca.
V našem primeru bomo uporabniku prikazali en preprost obrazec za registracijo, v katerega mora uporabnik vnesti podrobnosti, kot so uporabniško ime, geslo, e-poštni ID in starost.
Obrazec bo imel kontrolnike za preverjanje veljavnosti, ki zagotavljajo, da uporabnik informacije vnese pravilno.
Event Registration Guru99 Global Event
Razlaga kode:
- Za vrsto vnosa besedila uporabljamo atribut 'required'. To pomeni, da pri oddaji obrazca polje z besedilom ne sme biti prazno, v njem pa mora biti prisotno nekakšno besedilo.
- Naslednja vrsta vnosa je geslo. Ker je vrsta vnosa označena kot geslo, bo uporabnik, ko v polje vnese katero koli besedilo, prikrit.
- Ker je vrsta vnosa določena kot e-pošta, se mora besedilo v polju ujemati z vzorcem. Ta e-poštni naslov je zaščiten pred neželeno pošto. Če ga želite videti, omogočite Javascript. .
- Če je vrsta vnosa označena kot številka, če uporabnik poskuša vnesti kateri koli znak s tipkovnico ali abecedo, v polje z besedilom ne bo vnesen.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Če si želite ogledati preverjanje veljavnosti obrazca, kliknite gumb Pošlji, ne da bi na zaslonu vnesli kakršne koli podatke.
Ko kliknete gumb za oddajo, se prikaže pojavno okno, ki prikazuje napako pri preverjanju, da je treba polje izpolniti.
Torej preverjanje veljavnosti kontrolnika, ki je bil označen kot zahtevan, povzroči prikaz sporočila o napaki, če uporabnik v besedilno polje ne vnese nobene vrednosti.
Ko uporabnik vnese katero koli vrednost v nadzor gesla, boste opazili simbol '*', ki se uporablja za prikrivanje vnesenih znakov.
Nato vnesite napačen ID e-pošte in kliknite gumb za oddajo. Ko kliknete gumb za oddajo, se prikaže pojavno okno, ki prikazuje napako pri preverjanju, da mora polje imeti simbol @.
Torej bo potrditev kontrolnika, ki je bil označen kot kontrolnik e-pošte, povzročila, da se prikaže sporočilo o napaki, če uporabnik v besedilno polje ne vnese ustreznega e-poštnega ID-ja.
Ko poskušate v kontrolnik za starostno besedilo vnesti katere koli znake, na zaslonu ne bodo vneseni. Kontrolnik se bo z vrednostjo zapolnil šele, ko bo v kontrolnik vnesena številka.
Preverjanje obrazca z uporabo $ dirty, $ valid, $ invalid, $ pristine
AngularJS ponuja svoje dodatne lastnosti za preverjanje. AngularJS ponuja naslednje lastnosti za kontrolnike za namene preverjanja veljavnosti
- $ umazano - uporabnik je komuniciral s kontrolnikom
- $ veljavno - Vsebina polja je veljavna
- $ invalid - Vsebina polja ni veljavna
- $ pristine - uporabnik še ni komuniciral s kontrolnikom
Spodaj so navedeni koraki, ki jih je treba upoštevati za izvedbo kotne validacije.
Korak 1) Pri prijavi obrazca uporabite lastnost no validate. Ta lastnost sporoča HTML5, da bi preverjanje opravil AngularJS.
Korak 2) Prepričajte se, da ima obrazec določeno ime. Razlog za to je, da bo pri izvedbi kotne validacije uporabljeno ime obrazca.
Korak 3) Poskrbite, da ima vsak kontrolnik tudi določeno ime. Razlog za to je, da bo pri izvajanju kotne validacije uporabljeno ime kontrolnika.
Korak 4) Z direktivo ng-show preverite, ali so lastnosti kontrolnikov umazane, neveljavne in veljavne.
Oglejmo si primer, ki vključuje zgoraj omenjene korake.
V našem primeru
Imeli bomo samo preprosto besedilno polje, v katerega mora uporabnik v polje za besedilo vnesti ime teme. Če tega ne storite, se sproži napaka pri preverjanju in uporabniku se prikaže sporočilo o napaki.
Event Registration Guru99 Global Event
Razlaga kode:
- Upoštevajte, da smo obrazcu dali ime "myForm". To je potrebno pri dostopu do kontrol na obrazcu za potrditev AngularJS.
- Uporaba lastnosti "novalidate" za zagotovitev, da obrazec HTML omogoča izvedbo preverjanja AngularJS.
- Direktivo ng-show uporabljamo za preverjanje lastnosti "$ dirty" in "$ invalid". To pomeni, da če je besedilo spremenjeno, bo vrednost lastnosti "$ dirty" resnična. V primeru, da je vrednost polja z besedilom nič, bo lastnost »$ invalid« postala resnična. Če sta torej obe lastnosti resnični, potem preverjanje za kontrolnik ne bo uspelo. Če sta obe vrednosti resnični, bo tudi ng-show postala resnična in prikazan bo nadzor razpona z rdečimi barvnimi znaki.
- Pri tem preverjamo lastnost "$ error", ki prav tako oceni na true, ker smo za kontrolnik omenili, da je treba za kontrolnik vnesti vrednost. V takem primeru, če v besedilno polje ni vnesenih podatkov, bo kontrolnik za razpon prikazal besedilo "Uporabniško ime je obvezno".
- Če je kontrolna vrednost polja z besedilom neveljavna, želimo onemogočiti tudi gumb za oddajo, tako da uporabnik ne more oddati obrazca. Za nadzor uporabljamo lastnost "ng-disabled" za nadzor na podlagi pogojne vrednosti lastnosti "$ dirty" in "$ invalid" nadzora.
- V krmilniku samo nastavimo začetno vrednost vrednosti polja z besedilom na besedilo 'AngularJS'. To se šele počne, da se pri prvem prikazu obrazca v polje z besedilom nastavi neka privzeta vrednost. Bolje prikazuje, kako poteka preverjanje veljavnosti polja z besedilnim poljem.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Ko je obrazec prvotno prikazan, v besedilnem polju prikaže vrednost "AngularJS" in omogočen je "gumb za oddajo". Takoj ko odstranite besedilo iz kontrolnika, je sporočilo o napaki preverjanja omogočeno in gumb Pošlji onemogočen.
Zgornji posnetek zaslona prikazuje dve stvari
- Gumb za oddajo je onemogočen
- V besedilnem polju Tema ni imena teme. Zato sproži sporočilo o napaki "Uporabniško ime je obvezno."
Potrditev obrazca z uporabo samodejnega preverjanja veljavnosti AngularJS
V AngularJS obstaja možnost samodejnega preverjanja veljavnosti vseh kontrol v obrazcu, ne da bi bilo treba za preverjanje pisati kodo po meri. To lahko storite tako, da vključite modul po meri, imenovan "jcs-AutoValidate."
Ko je ta modul nameščen, vam za preverjanje veljavnosti ali prikaz sporočil o napakah ni treba postaviti posebne kode. Vse to ureja koda znotraj JCS-AutoValidate.
Oglejmo si preprost primer, kako to doseči.
V tem primeru
Imeli bomo samo preprost obrazec s kontrolnikom polja z besedilom, ki je obvezno polje. Če ta kontrolnik ni izpolnjen, se prikaže sporočilo o napaki.
Event Registration Guru99 Event
Razlaga kode:
- Najprej moramo vključiti skript "jcs-auto-validate.js", ki ima vse funkcije samodejnega preverjanja veljavnosti.
- Zagotoviti moramo, da je vsak element, vključno z "oznako div", uvrščen v razred "skupina obrazcev".
- Prav tako je treba zagotoviti, da so vsi elementi (ki so elementi HTML, kot so nadzor vnosa, nadzor razpona, nadzor div in tako naprej), kot so kontrolniki za vnos, prav tako postavljeni v razred skupine obrazcev.
- V svoj modul AngularJS JS vključite jcs-autovalidate.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Ko zaženete kodo, se privzeto prikaže zgornji obrazec kot v kodi HTML.
Če poskusite poslati obrazec, se prikaže sporočilo o napaki, ki pravi: "To polje je obvezno." Vse to naredi možnost JCS-AutoValidate.
Povratne informacije uporabnikov z gumbi Ladda
Gumbi "ladda" so poseben okvir, zgrajen za gumbe na vrhu JavaScript, ki dajejo vizualni učinek gumbom, ko jih pritisnete.
Torej, če gumb dobi atribut "ladda" in ga pritisnete, se prikaže učinek vrtenja. Za dodajanje vizualnih učinkov so na voljo tudi različni slogi podatkov za gumb.
Oglejmo si primer, kako videti gumbe "ladda" v akciji. Samo videli bomo preprost obrazec, ki ima gumb za oddajo. Ko pritisnete gumb, se na gumbu prikaže učinek ožemanja.
Event Registration Guru99 Event
Razlaga kode:
- Uporabljamo direktivo "ng-submit", da pokličemo funkcijo, imenovano "submit". S to funkcijo bomo spremenili atribut ladda gumba za oddajo.
- Atribut ladda je poseben atribut okvira ladda. Ta atribut doda nadzoru učinek vrtenja. Vrednost atributa ladda nastavljamo spremenljivki oddaje.
- Lastnost podatkovnega sloga je spet dodaten atribut, ki ga ponuja ogrodje ladda in doda gumbu za oddajo drugačen vizualni učinek.
- Za delovanje okvira ladda je treba v aplikacijo AngularJS.JS dodati modul 'AngularJS-ladda'.
- Sprva definiramo in nastavimo vrednost spremenljivke, imenovane 'submitting', na false. Ta vrednost je nastavljena za atribut ladda gumba za oddajo. S prvotno nastavitvijo tega na false trdimo, da še ne želimo, da bi gumb za oddajo imel učinek ladda.
- Deklariramo funkcijo, ki se pokliče s pritiskom na gumb za oddajo. V tej funkciji nastavimo 'oddajo' na true. Tako bo učinek ladda uporabljen na gumbu za oddajo.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Ko je obrazec prvotno prikazan, je gumb za oddajo prikazan v preprosti obliki.
Ko pritisnete gumb za oddajo, je spremenljivka za oddajo v krmilniku nastavljena na true. Ta vrednost se prenese v atribut "ladda" gumba za oddajo, kar povzroči učinek vrtenja gumba.
Povzetek
- Potrditev kontrolnikov HTML v besedilnem polju lahko izvedete z uporabo atributa 'required'.
- V HTML5 so dodani novi kontrolniki, kot so geslo, e-pošta in številka, ki zagotavljajo svoj nabor preverjanj.
- Za potrditev obrazca v programu AngularJS poskrbimo tako, da si ogledamo vrednosti $ umazane, veljavne, neveljavne in neokrnjene vrednosti kontrolnika obrazca.
- Samodejno preverjanje veljavnosti v aplikacijah AngularJS je mogoče doseči tudi z uporabo modula za samodejno preverjanje JCS.
- V aplikacijo Angular.js lahko dodamo gumbe Ladda, ki uporabniku ob pritisku na gumb dajo nekoliko boljši vizualni občutek.