Valideerimine on protsess, mis tagab andmete õigsuse ja täielikkuse.
Reaalses näites oletame, et sait vajab enne sellele saidile täieliku juurdepääsu saamist registreerimisvormi täitmist. Registreerimislehel oleksid sisendväljad kasutajanime, parooli, e-posti aadressi jms jaoks.
Kui kasutaja vormi esitab, toimub valideerimine enne, kui üksikasjad serverisse saadetakse. Selle valideerimisega püütakse parimal võimalikul viisil tagada sisendväljade üksikasjade õige sisestamine.
Näiteks peab e- posti aadressi vorming olema alati See e-posti aadress on spämmirobotite eest kaitstud. Selle vaatamiseks peate lubama JavaScripti. ; kui keegi sisestab e-posti ID-sse ainult kasutajanime, siis ideaalis peaks valideerimine nurjuma. Seega kontrollitakse valideerimisel nende põhikontrollide tegemist enne, kui üksikasjad serverile edasiseks töötlemiseks saadetakse.
Selles õpetuses saate teada
- Vormi valideerimine HTML5 abil
- Vormi valideerimine, kasutades seadeid $ dirty, $ valid, $ invalid, $ pristine
- Vormi kinnitamine AngularJS automaatse valideerimise abil
- Kasutaja tagasiside Ladda nuppudega
Vormi valideerimine HTML5 abil
Vormi valideerimine on kasutaja veebivormi sisestatud teabe eelvalideerimine enne selle serverisse saatmist. Alati on parem kinnitada kliendi poolel olevat teavet. Seda seetõttu, et see lisab vähem üldkulusid, kui kasutajale tuleb vormiga uuesti esitada, kui sisestatud teave on vale.
Vaatame, kuidas saab vormide valideerimist HTML5-s läbi viia.
Meie näites näitame kasutajale ühte lihtsat registreerimisvormi, kuhu kasutaja peab sisestama üksikasjad, näiteks kasutajanime, parooli, e-posti aadressi ja vanuse.
Vormil on valideerimise juhtelemendid, mis tagavad, et kasutaja sisestab teabe õigel viisil.
Event Registration Guru99 Global Event
Koodi selgitus:
- Tekstisisestuse tüübi jaoks kasutame atribuuti „nõutav”. See tähendab, et vormi esitamisel ei tohi tekstikast olla tühi ja tekstikastis peaks olema mingisugune tekst.
- Järgmine sisendtüüp on parool. Kuna sisendtüüp on märgitud paroolina, siis kui kasutaja sisestab väljale mis tahes teksti, siis see maskeeritakse.
- Kuna sisendtüübiks on määratud e-post, peab kasti tekst vastama mustrile. See e-posti aadress on spämmirobotite eest kaitstud. Selle vaatamiseks peate lubama JavaScripti. .
- Kui sisestustüüp on märgitud numbriks, siis kui kasutaja proovib sisestada mis tahes märki klaviatuuri või tähestiku abil, ei sisestata seda tekstikasti.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Vormi kinnitamise toimimise nägemiseks klõpsake nuppu Esita, ilma et ekraanile teavet sisestaksite.
Pärast nuppu Esitamine klõpsamist ilmub hüpikaken, mis näitab valideerimisviga, et väli tuleb täita.
Nii et nõutuks märgitud juhtelemendi valideerimine kuvab tõrketeate, kui kasutaja ei sisesta tekstiväljale väärtust.
Kui kasutaja sisestab paroolikontrollis mis tahes väärtuse, märkate sümbolit *, mida kasutatakse sisestatud märkide maskeerimiseks.
Sisestame siis vale e-posti aadressi ja klõpsake nuppu Esita. Pärast nupul Esita klõpsamist ilmub hüpikaken, mis näitab valideerimisviga, et väljal peab olema sümbol @.
Nii et e-posti juhtelemendina märgitud juhtelemendi valideerimine kuvab tõrketeate, kui kasutaja ei sisesta tekstiväljale õiget e-posti aadressi ID-d.
Lõpuks, kui proovite vanuse tekstikontrolli sisestada mis tahes märki, ei sisestata seda ekraanile. Juhtelement täidetakse väärtusega ainult siis, kui juhtnuppu on sisestatud number.
Vormi valideerimine, kasutades seadeid $ dirty, $ valid, $ invalid, $ pristine
AngularJS pakub valideerimiseks oma täiendavaid omadusi. AngularJS pakub kontrollimiseks kontrollimiseks järgmisi omadusi
- $ dirty - kasutaja on juhtimisega suhelnud
- $ valid - välja sisu on kehtiv
- $ invalid - välja sisu on vale
- $ pristine - kasutaja pole juhtimisega veel suhelnud
Allpool on toodud sammud, mida tuleb nurkvalideerimise teostamiseks järgida.
1. samm. Kasutage vormi deklareerimisel atribuuti valideerimata. See omadus ütleb HTML5-le, et valideerimise teeks AngularJS.
2. samm. Veenduge, et vormil oleks selle jaoks määratletud nimi. Selle põhjuseks on see, et nurkvalideerimise käigus kasutatakse vormi nime.
3. samm. Veenduge, et igal juhtelemendil oleks ka nimi määratletud. Selle põhjuseks on see, et nurkvalideerimise korral kasutatakse kontrollnime.
4. samm. Kasutage ng-show käskkirja, et kontrollida juhtelementide atribuute $ dirty, $ invalid ja $ valid.
Vaatame näidet, mis sisaldab ülalnimetatud samme.
Meie näites
Meil on lihtsalt lihtne tekstiväli, kus kasutaja peab tekstiväljale sisestama teema nime. Kui seda ei tehta, käivitatakse valideerimisviga ja veateadet kuvatakse kasutajale.
Event Registration Guru99 Global Event
Koodi selgitus:
- Pange tähele, et oleme vormile andnud nime "myForm". See on vajalik AngularJS-i valideerimise vormi juhtelementide juurde pääsemiseks.
- Atribuudi "novalidate" kasutamine tagamaks, et HTML-vorm võimaldab AngularJS-il valideerimise läbi viia.
- Kasutame atribuutide "$ dirty" ja "$ invalid" kontrollimiseks käsku ng-show. See tähendab, et kui tekstikasti on muudetud, on atribuudi väärtus "$ dirty" tõene. Juhul, kui tekstikasti väärtus on null, saab omadus "$ invalid" tõeks. Nii et kui mõlemad omadused on tõesed, siis kontrollimine nurjub. Seega, kui mõlemad väärtused on tõesed, saab tõsi ka ng-show ja kuvatakse punaste värvimärkidega laiuskontroll.
- Selles kontrollime omadust "$ error", mis vastab ka tõele, kuna oleme juhtimise jaoks maininud, et juhtelemendile tuleks sisestada väärtus. Sellisel juhul, kui tekstikasti pole andmeid sisestatud, kuvatakse vahemiku juhtnupul tekst "Kasutajanimi on vajalik".
- Kui tekstikasti juhtväärtus on vale, tahame ka nupu Esitada keelata, et kasutaja ei saaks vormi esitada. Kasutame juhtelemendi atribuuti "ng-invaliidid", mis põhineb juhtelemendi omaduste "$ dirty" ja "$ invalid" tingimusväärtusel.
- Kontrolleris määrame tekstikasti algväärtuseks lihtsalt teksti 'AngularJS'. Seda tehakse lihtsalt selleks, et vormi esmakordsel kuvamisel tekstikastile määrata mõni vaikeväärtus. See näitab paremini, kuidas tekstikasti välja valideerimine toimub.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Kui vorm on algselt kuvatud, kuvatakse tekstikastis väärtus "AngularJS" ja nupp "Esita" on lubatud. Niipea kui teksti juhtnupust eemaldate, lubatakse valideerimise tõrketeade ja nupp Esita keelatakse.
Ülaltoodud ekraanipilt kuvab kahte asja
- Esitusnupp on keelatud
- Teema tekstikastis pole teema nime. Seega käivitab see tõrketeate "Kasutajanimi on vajalik".
Vormi kinnitamine AngularJS automaatse valideerimise abil
AngularJS-is on võimalus kõigi vormis olevate juhtelementide kinnitamiseks automaatselt, ilma et oleks vaja valideerimiseks kohandatud koodi kirjutada. Seda saab teha, lisades kohandatud mooduli nimega "jcs-AutoValidate".
Kui see moodul on paigas, ei pea te valideerimise või veateadete kuvamise jaoks spetsiaalset koodi sisestama. Seda kõike haldab kood JCS-AutoValidate'is.
Vaatame lihtsat näidet selle saavutamiseks.
Selles näites
Meil on lihtsalt lihtne vorm tekstikasti juhtimisega, mis on kohustuslik väli. Kui seda juhtelementi ei täideta, tuleks kuvada tõrketeade.
Event Registration Guru99 Event
Koodi selgitus:
- Esiteks peame lisama skripti "jcs-auto-validate.js", millel on kõik automaatse valideerimise funktsioonid.
- Peame tagama, et kõik elemendid, sealhulgas märgend "div", paigutatakse klassi "vorm-rühm".
- Samuti peate tagama, et iga element (mis on HTML-i element nagu sisendi juhtimine, vahemiku juhtimine, jagamise juhtimine ja nii edasi), nagu sisendi juhtelemendid, paigutatakse ka vormirühma klassi.
- Lisage jcs-autovalidate oma AngularJS JS moodulisse.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Vaikimisi kuvatakse koodi käivitamisel ülaltoodud vorm HTML-koodi järgi.
Kui proovite vormi edastada, ilmub tõrketeade: "See väli on kohustuslik". Seda kõike teeb valik JCS-AutoValidate.
Kasutajate tagasiside Ladda nuppudega
Nupud "ladda" on spetsiaalne raamistik, mis on ehitatud JavaScripti peal asuvate nuppude jaoks, et anda nuppudele visuaalne efekt nende vajutamisel.
Nii et kui nupule antakse atribuut "ladda" ja seda vajutatakse, kuvatakse spin-efekt. Lisaks on nupu jaoks saadaval erinevad andestiilid, et pakkuda täiendavaid visuaalseid efekte.
Vaatame näite, kuidas nööpe "ladda" näha. Näeme lihtsalt lihtsat vormi, millel on nuppu Esita. Kui nuppu vajutatakse, kuvatakse nupul pöörlemise efekt.
Event Registration Guru99 Event
Koodi selgitus:
- Funktsiooni nimega "esita" kutsumiseks kasutame direktiivi "ng-submit". Seda funktsiooni kasutatakse esitusnupu ladda atribuudi muutmiseks.
- Ladda atribuut on ladda raamistiku eriline atribuut. Just see atribuut lisab kontrolli spin-efekti. Määrame ladda atribuudi väärtuse esitatavale muutujale.
- Andmestiili atribuut on jällegi ladda raamistiku pakutav täiendav atribuut, mis lisab nupule Esita lihtsalt teistsuguse visuaalse efekti.
- Ladda raamistiku toimimiseks tuleb AngularJS.JS-i rakendusse lisada moodul 'AngularJS-ladda'.
- Esialgu määratleme ja seadistame muutuja nimega 'submitting' väärtuseks false. See väärtus määratakse nupu Esitamine ladda atribuudile. Esialgu valeks määrates ütleme, et me ei soovi, et nupul Esita oleks veel Ladda-efekt.
- Kuulutame välja funktsiooni, mida kutsutakse nupule Esitamine vajutades. Selles funktsioonis määrame „esitamise” väärtuseks tõene. See põhjustab ladda-efekti rakendamise nupule.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Kui vormi algselt kuvatakse, kuvatakse esitamise nupp selle lihtsal kujul.
Kui nuppu Esitamine vajutatakse, määratakse kontrolleri esitamise muutuja väärtuseks Tõene. See väärtus antakse edastusnupu atribuudile "ladda", mis põhjustab nupu pöörlemise efekti.
Kokkuvõte
- Tekstikasti HTML-juhtelementide valideerimise saab teha atribuudi 'nõutav' abil.
- HTML5-s on lisatud uued juhtelemendid, näiteks parool, e-post ja number, mis pakuvad nende enda valideerimiskomplekti.
- Vormi valideerimine AngularJS-is hoolitseb vormi juhtelemendi väärtuste $ dirty, $ valid, $ invalid ja $ puutumatu väärtuste vaatamise kaudu.
- Automaatse valideerimise saab AngularJS-rakendustes saavutada ka JCS-automaatse valideerimise mooduli abil.
- Ladda nuppe saab lisada Angular.js rakendusse, et anda nupule vajutades kasutajale veidi täiustatud visuaalset tunnet.