Validacija je metoda za preverite pristnost uporabnik. Uporablja se v vseh spletnih tehnologijah, kot je in . Toda danes se bomo osredotočili na preverjanje veljavnosti v kotnem JS v naslednjem vrstnem redu:
- Kaj je validacija obrazca?
- Validacija obrazca v kotnem JS
- Koraki pri preverjanju veljavnosti obrazca
- Koda
Kaj je preverjanje obrazca?
Preverjanje obrazca je tehnika, s katero lahko preverimo obrazec HTML. Vzemimo preprost primer, če domnevamo, da ima uporabnik obrazec HTML in da ima obrazec HTML različna polja. Ta polja potrdi validacijski obrazec, ko želimo potrditi obrazec, moramo samo preveriti vrednost določenega polja z validacijskim izrazom .
Če sta regularni izraz in vrednost polja enaka, lahko rečemo, da je naš obrazec potrjen. V obrazcu HTML obstajajo različne vrste preverjanja veljavnosti, kot so e-pošta, obvezno, min, max, geslo itd.
Validacija obrazca v kotnem JS
Pogovorimo se o tem, kako lahko potrdimo obrazec v kotnem JS. Angular JS ponuja različne lastnosti za preverjanje veljavnosti obrazca, s katerimi lahko preverimo obrazec ali pridobimo podatke iz obrazca.
$ veljavno : Ta lastnost z uporabo ustreznega pravila o tem pove, ali je polje veljavno ali ne.
$ neveljavno : Kot že ime piše neveljavno, to polje je neveljavno ali ne temelji na ustreznem pravilu o tem.
kaj je medpomnilnik
$ nedotaknjeno : Vrnil bo true v polju za vnos obrazca se ne uporablja.
$ umazano : V uporabljenem polju za vnos obrazca bo vrnilo true.
$ dotaknil : BooleanTrue, če je bil vnos zamegljen.
Za dostop do obrazca: .
Za dostop do vhoda: ..
Zdaj pa razložimo validacijo obrazca v kotnem JS s primerom, tako da najprej naredimo dve datoteki, ena je app.js in druga index.html. Naša datoteka index.htm vsebuje preprost obrazec HTML, ki ima kotno preverjanje veljavnosti, naša aplikacija.js pa vsebuje stransko kodo za obdelavo preverjanja obrazca na strani index.html.
razlika med xml in html
Theindex.htmlvsebina strani obrazec zrazveljavitilastnina in kaj to natančno pomeni?
Lastnost novalidate v oznaki obrazca sporoča HTML-ju, da lahko uporabimo preverjanje veljavnosti obrazca po meri. Če ne damo lastnosti novalidate, potem obrazec HTML potrdi s privzetimi lastnostmi preverjanja obrazca HTML5.
Koraki pri preverjanju veljavnosti obrazca
V naši obliki smo v naši obliki ustvarili 6 polj, to so ime, priimek, e-pošta, telefon, geslo in sporočilo.
Najprej dodamo zahtevani validator polj, ta validator pove uporabnikom, da je potrebno določeno polje.
Naslednje je e-poštno polje, če uporabnik ne navede nobenega veljavnega e-poštnega sporočila, potem naš program za preverjanje e-pošte prikaže napako pri preverjanju e-pošte.
Pri preverjanju veljavnosti gesla nastavimo najmanjšo in največjo dolžino, najmanjša dolžina je 5, največja pa 8, tako da lahko uporabnik vnese veljavno geslo med 5 in 8 znaki.
Na koncu nastavimo zahtevana polja za telefon in sporočila, posebej pa uporabimo preverjanje številke za vloženo telefonsko številko.
Koda za preverjanje obrazca v kotnem JS
index.html
Primer kotnega obsega Ime
Ta vloga je obvezna
Priimek
Ta vloga je obvezna
E-naslov
Ta vloga je obvezna
Ni veljaven e-poštni naslov
__v sebi)Telefon
Ta vloga je obvezna
To ni veljaven telefon
Geslo
Ta vloga je obvezna
Geslo med 5 in 8 znaki
Sporočilo
Ta vloga je obvezna
Pošlji
app.js
var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', funkcija ($ obseg) {})Pogovorimo se o nekaterih smernicah za preverjanje veljavnosti, uporabljenih v obliki:
- ng-zahtevano : Za zagotovitev zahtevanega polja
- ng-show : Za prikaz sporočila o napaki glede na pogoj (preverite lastnosti preverjanja veljavnosti)
- najmanjše dolžine : Za zagotavljanje minimalne dolžine
- ng-maxlength : Za zagotavljanje največje dolžine
- vzorca : Da se ujema z določenim vzorcem
- ng-model : Polje poveže z lastnostmi preverjanja, kot so $ error, $ valid itd.
S tem smo prišli do konca tega članka o validaciji v Angular JS. Upam, da ste razumeli različne stvari, ki jih je treba upoštevati pri preverjanju veljavnosti obrazca v Angular JS.
Če želite izvedeti več o ogrodju Angular, si oglejte naš ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnih projektov. Ta trening vam bo pomagal poglobljeno razumeti Angular in vam pomagal doseči obvladovanje predmeta.
Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje tega članka in javili se vam bomo.