Provjera valjanosti postupak je kojim se osigurava točnost i potpunost podataka.
U primjeru iz stvarnog svijeta, pretpostavimo web mjesto koje zahtijeva popunjavanje obrasca za registraciju prije punog pristupa toj stranici. Stranica za registraciju imala bi polja za unos korisničkog imena, lozinke, id-a e-pošte i tako dalje.
Kad korisnik pošalje obrazac, obično bi se prvo dogodila provjera valjanosti prije nego što se detalji pošalju poslužitelju. Ova provjera valjanosti pokušala bi osigurati u najboljoj mogućoj mjeri da se detalji za polja za unos unose na ispravan način.
Na primjer, id e-pošte uvijek mora biti u formatu Ova adresa e-pošte zaštićena je od neželjenih robota. Ako ga želite pregledati, potreban vam je omogućen JavaScript. ; ako netko unese samo korisničko ime u id e-pošte, u idealnom slučaju provjera valjanosti ne bi uspjela. Dakle, provjera valjanosti vrši ove osnovne provjere prije nego što se detalji pošalju poslužitelju na daljnju obradu.
U ovom vodiču naučit ćete-
- Provjera obrazaca pomoću HTML5
- Provjera obrazaca pomoću $ dirty, $ valid, $ invalid, $ pristine
- Provjera obrazaca pomoću automatske provjere valjanosti AngularJS
- Povratne informacije korisnika pomoću gumba Ladda
Provjera obrazaca pomoću HTML5
Provjera valjanosti obrasca postupak je prethodne provjere valjanosti podataka koje je korisnik unijeo u web obrazac prije nego što se pošalju poslužitelju. Uvijek je bolje provjeriti podatke na samoj strani klijenta. To je zato što dodaje manje režijskih troškova ako je korisniku bilo potrebno ponovno predstaviti obrazac ako su unijeti podaci pogrešni.
Pogledajmo kako se provjera valjanosti obrazaca može provesti u HTML5.
U našem ćemo primjeru korisniku prikazati jedan jednostavan obrazac za registraciju u koji korisnik treba unijeti detalje kao što su korisničko ime, lozinka, id e-pošte i dob.
Obrazac će imati kontrole provjere valjanosti kako bi se osiguralo da korisnik unese informacije na pravilan način.
Event Registration Guru99 Global Event
Objašnjenje koda:
- Za vrstu unosa teksta koristimo atribut 'potreban'. To znači da okvir za tekst ne može biti prazan kad se obrazac preda, a neka vrsta teksta treba biti prisutna u okviru za tekst.
- Sljedeća vrsta unosa je lozinka. Budući da je vrsta unosa označena kao lozinka, kada korisnik unese bilo koji tekst u polje, bit će maskiran.
- Budući da je vrsta unosa navedena kao e-pošta, tekst u okviru mora odgovarati uzorku Ova adresa e-pošte zaštićena je od neželjenih robota. Ako ga želite pregledati, potreban vam je omogućen JavaScript. .
- Kad je vrsta unosa označena kao broj, ako korisnik pokuša unijeti bilo koji znak pomoću tipkovnice ili abecede, neće se unijeti u okvir za tekst.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Da biste provjerili valjanost obrasca na djelu, kliknite gumb Pošalji bez unosa bilo kakvih podataka na zaslon.
Nakon što se klikne gumb za slanje, pojavit će se skočni prozor koji prikazuje pogrešku provjere valjanosti da polje treba popuniti.
Dakle, provjera valjanosti kontrole koja je označena kao potrebna, uzrokuje prikaz poruke o pogrešci ako korisnik ne unese nikakvu vrijednost u polje za tekst.
Kad korisnik unese bilo koju vrijednost u kontrolu lozinke, primijetit ćete simbol '*' koji se koristi za maskiranje unesenih znakova.
Unesite tada pogrešan id e-pošte i kliknite gumb za slanje. Nakon što se klikne gumb za slanje, pojavit će se skočni prozor koji prikazuje pogrešku provjere valjanosti da polje mora imati simbol @.
Dakle, provjera valjanosti kontrole koja je označena kao kontrola e-pošte rezultirat će prikazom poruke o pogrešci ako korisnik ne unese odgovarajući ID e-pošte u polje za tekst.
Konačno, kada pokušate unijeti bilo koji znak u kontrolu teksta za dob, on se neće unijeti na zaslon. Kontrola će se popuniti vrijednošću samo kada se u nju unese broj.
Provjera obrazaca pomoću $ dirty, $ valid, $ invalid, $ pristine
AngularJS pruža svoja dodatna svojstva za provjeru valjanosti. AngularJS pruža sljedeća svojstva za kontrole u svrhu provjere valjanosti
- $ prljavo - korisnik je komunicirao s kontrolom
- $ valid - Sadržaj polja je valjan
- $ invalid - Sadržaj polja nije važeći
- $ pristine - Korisnik još nije komunicirao s kontrolom
Ispod su koraci koje treba slijediti za provođenje kutne validacije.
Korak 1) Koristite svojstvo no validate prilikom deklariranja obrasca. Ovo svojstvo govori HTML5-u da će provjeru valjanosti izvršiti AngularJS.
Korak 2) Osigurajte da obrazac ima definirano ime za njega. Razlog tome je što će se prilikom provođenja kutne validacije koristiti naziv obrasca.
Korak 3) Osigurajte da svaka kontrola također ima definirano ime za nju. Razlog za to je taj što će se prilikom provođenja kutne validacije koristiti kontrolni naziv.
Korak 4) Upotrijebite ng-show direktivu za provjeru svojstava $ dirty, $ invalid i $ valid za kontrole.
Pogledajmo primjer koji uključuje gore spomenute korake.
U našem primjeru,
Upravo ćemo dobiti jednostavno tekstualno polje u koje korisnik treba unijeti ime teme u tekstni okvir. Ako se to ne učini, pokrenut će se pogreška provjere valjanosti i poruka pogreške prikazat će se korisniku.
Event Registration Guru99 Global Event
Objašnjenje koda:
- Imajte na umu da smo dali naziv obrascu koji je "myForm". To je potrebno pri pristupu kontrolama na obrascu za provjeru AngularJS.
- Korištenje svojstva "novalidate" za osiguravanje da HTML obrazac omogućuje AngularJS-u provođenje provjere valjanosti.
- Koristimo ng-show direktivu za provjeru svojstva "$ dirty" i "$ invalid". To znači da će, ako je tekstni okvir izmijenjen, vrijednost svojstva "$ dirty" biti istinita. Također, u slučaju kada je vrijednost okvira za tekst null, svojstvo "$ invalid" postat će istina. Dakle, ako su oba svojstva istinita, tada provjera neće uspjeti za kontrolu. Stoga, ako su obje vrijednosti istinite, ng-show će također postati istina, a prikazat će se kontrola raspona s crvenim znakovima.
- U ovome provjeravamo svojstvo "$ error" koje također procjenjuje na true jer smo za kontrolu spomenuli da vrijednost treba unijeti za kontrolu. U takvom slučaju, kada u tekstni okvir nisu uneseni podaci, kontrola raspona prikazat će tekst "Potrebno je korisničko ime".
- Ako je kontrolna vrijednost tekstualnog okvira nevaljana, također želimo onemogućiti gumb za slanje tako da korisnik ne može poslati obrazac. Za kontrolu koristimo svojstvo "ng-disabled" za kontrolu na temelju uvjetne vrijednosti svojstva "$ dirty" i "$ invalid" kontrole.
- U upravljaču samo postavljamo početnu vrijednost vrijednosti okvira za tekst na tekst 'AngularJS'. To se upravo radi kako bi se pri prvom prikazivanju obrasca postavila neka zadana vrijednost za tekstni okvir. Bolje prikazuje kako se validacija odvija za polje tekstualnog okvira.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Kada se obrazac prvotno prikaže, okvir za tekst prikazuje vrijednost "AngularJS" i omogućen je "gumb za slanje". Čim uklonite tekst s kontrole, poruka o pogrešci provjere valjanosti omogućena je, a gumb Submit je onemogućen.
Gornji snimak zaslona prikazuje dvije stvari
- Gumb za slanje je onemogućen
- U okviru za tekst teme nema naziva teme. Stoga se aktivira poruka pogreške "Potrebno je korisničko ime".
Provjera obrazaca pomoću automatske provjere valjanosti AngularJS
U AngularJS-u postoji mogućnost automatskog provjeravanja svih kontrola na obrascu bez potrebe za pisanjem prilagođenog koda za provjeru valjanosti. To se može učiniti uključivanjem prilagođenog modula nazvanog "jcs-AutoValidate".
S ovim modulom na mjestu ne trebate postavljati nikakve posebne kodove da biste izvršili provjeru valjanosti ili prikazali poruke pogreške. Sve ovo rješava kôd unutar JCS-AutoValidate.
Pogledajmo jednostavan primjer kako to postići.
U ovom primjeru,
Upravo ćemo dobiti jednostavan obrazac s kontrolom okvira za tekst koji je obavezno polje. Ako se ova kontrola ne popuni, trebala bi se prikazati poruka o pogrešci.
Event Registration Guru99 Event
Objašnjenje koda:
- Prvo, moramo uključiti skriptu "jcs-auto-validate.js" koja ima sve funkcije automatske provjere valjanosti.
- Moramo osigurati da se svaki element, uključujući "div tag", stavi u klasu "form-group".
- Također treba osigurati da se svaki element (koji je HTML element kao što je kontrola unosa, kontrola raspona, kontrola div i tako dalje), kao što su kontrole unosa, također stavi u klasu grupe obrazaca.
- Uključite jcs-autovalidate u svoj AngularJS JS modul.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Prema zadanim postavkama, kada pokrenete svoj kôd, gornji obrazac prikazat će se prema HTML kodu.
Ako pokušate poslati obrazac, pojavit će se poruka o pogrešci koja kaže: "Ovo je polje obavezno." Sve to čini opcija JCS-AutoValidate.
Povratne informacije korisnika s gumbima Ladda
Gumbi "ladda" poseban su okvir napravljen za gumbe na vrhu JavaScript-a koji daju vizualni efekt gumbima kad se pritisnu.
Dakle, ako gumb dobije atribut "ladda" i pritisne se, prikazat će se efekt okretanja. Također, za gumb su dostupni različiti stilovi podataka za pružanje dodatnih vizualnih efekata.
Pogledajmo primjer, kako vidjeti gumbe "ladda" na djelu. Tek ćemo vidjeti jednostavan obrazac koji ima gumb za slanje. Kada se pritisne tipka, na gumbu će se prikazati efekt okretanja.
Event Registration Guru99 Event
Objašnjenje koda:
- Koristimo direktivu "ng-submit" za pozivanje funkcije koja se naziva "submit". Ova će se funkcija koristiti za promjenu atributa ladda gumba za slanje.
- Atribut ladda je poseban atribut okvira ladda. Ovaj je atribut taj koji kontrolira efekt okretanja. Postavljamo vrijednost atributa ladda varijabli koja podnosi.
- Svojstvo stila podataka opet je dodatni atribut koji nudi ladda okvir, koji samo dodaje drugačiji vizualni efekt gumbu za slanje.
- Modul 'AngularJS-ladda' treba dodati aplikaciji AngularJS.JS kako bi ladda okvir mogao funkcionirati.
- U početku definiramo i postavljamo vrijednost varijable koja se naziva 'podnošenje' na false. Ova je vrijednost postavljena za atribut ladda gumba za slanje. U početku postavljajući ovo na false, kažemo da ne želimo da gumb za slanje još ima učinak ladda.
- Deklariramo funkciju koja se poziva kada se pritisne gumb za slanje. U ovoj funkciji postavljamo 'podnošenje' na true. To će uzrokovati primjenu ladda efekta na gumb za slanje.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Kada je obrazac početno prikazan, gumb za slanje prikazan je u jednostavnom obliku.
Kada se pritisne gumb za slanje, varijabla za slanje u regulatoru postavlja se na true. Ova se vrijednost prenosi na atribut "ladda" gumba za slanje što uzrokuje efekt okretanja gumba.
Sažetak
- Provjera valjanosti HTML kontrola tekstualnog okvira može se izvršiti pomoću atributa 'required'.
- U HTML5 dodane su nove kontrole poput lozinke, e-pošte i broja koje pružaju vlastiti niz provjera valjanosti.
- Provjera valjanosti obrasca u AngularJS rješava se promatranjem vrijednosti $ dirty, $ valid, $ invalid i $ pristine kontrole obrasca.
- Automatska provjera valjanosti u aplikacijama AngularJS također se može postići korištenjem modula JCS-automatska provjera valjanosti.
- Ladda gumbi mogu se dodati u aplikaciju Angular.js kako bi korisnik imao malo poboljšanog vizualnog osjećaja kada se pritisne tipka.