Provjera AngularJS obrasca pri slanju: primjer registracije
James Hartman
Validacija obrazaca u AngularJS
Provjera obrasca u AngularJS je proces kojim se provjerava jesu li podaci uneseni u obrazac točni i potpuni. Kada korisnik podnese obrazac, prvo se vrši provjera valjanosti prije nego što se detalji pošalju na poslužitelj. Proces provjere valjanosti u najboljoj mogućoj mjeri osigurava da su pojedinosti za polja za unos unesene na ispravan način.
U primjeru iz stvarnog svijeta, pretpostavimo web mjesto koje zahtijeva ispunjavanje obrasca za registraciju prije dobivanja punog pristupa ovom web mjestu. Stranica za registraciju imala bi polja za unos korisničkog imena, lozinke, ID-a e-pošte i tako dalje.
Na primjer, ID e-pošte uvijek mora biti u formatu od korisničkoime@site.domena; ako netko unese samo korisničko ime u ID e-pošte, idealno bi bilo da provjera ne uspije. Dakle, validacija gleda na izvođenje ovih osnovnih provjera prije nego što se detalji pošalju poslužitelju na daljnju obradu.
Provjera valjanosti obrasca pomoću HTML5
Provjera valjanosti obrasca je postupak prethodne provjere valjanosti informacija koje je korisnik unio u web obrazac prije nego što se pošalju na poslužitelj. Uvijek je bolje potvrditi informacije na samoj strani klijenta. To je zato što dodaje manje dodatnih troškova ako se korisniku mora ponovno prikazati obrazac ako su uneseni podaci bili pogrešni.
Pogledajmo kako se validacija obrasca AngularJS može provesti u HTML5.
U našem primjeru pokazat ćemo korisniku jedan jednostavan obrazac za registraciju u koji korisnik treba unijeti podatke kao što su korisničko ime, lozinka, ID e-pošte i dob.
Obrazac će imati kontrole provjere kako bi se osiguralo da korisnik unese podatke na pravilan način.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Objašnjenje koda
- Za vrstu unosa teksta koristimo atribut 'required'. To znači da tekstni okvir ne može biti prazan kada se obrazac pošalje, a neka vrsta teksta bi trebala biti prisutna u tekstualnom okviru.
- Sljedeća vrsta unosa je lozinka. Budući da je vrsta unosa označena kao lozinka, kada korisnik unese bilo koji tekst u polje, on će biti maskiran.
- Budući da je vrsta unosa navedena kao e-pošta, tekst u okviru mora odgovarati uzorku ime@site.domena.
- Kada je vrsta unosa označena kao broj, ako korisnik pokuša unijeti bilo koji znak koristeći tipkovnicu ili abecedu, on neće biti unesen u tekstni okvir.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku za provjeru valjanosti obrasca AngularJS pri slanju.
Izlaz
Da biste vidjeli provjeru valjanosti obrasca na djelu, kliknite gumb Pošalji bez unosa bilo kakvih informacija na zaslonu.
Nakon što se klikne gumb za slanje, pojavit će se skočni prozor koji prikazuje pogrešku provjere da polje treba ispuniti.
Dakle, provjera valjanosti za kontrolu koja je označena kao obavezna, uzrokuje da se prikaže poruka o pogrešci ako korisnik ne unese nikakvu vrijednost u tekstualno polje.
Kada korisnik unese bilo koju vrijednost u kontrolu lozinke, primijetit ćete simbol '*' koji se koristi za maskiranje znakova koji se unose.
Unesite 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 da polje mora imati simbol @.
Dakle, provjera valjanosti kontrole koja je označena kao kontrola e-pošte uzrokovat će prikazivanje poruke o pogrešci ako korisnik ne unese ispravan ID e-pošte u tekstualno polje.
Konačno, kada pokušate unijeti bilo koji znak u kontrolu teksta dobi, on neće biti unesen na zaslonu. Kontrola će se popuniti vrijednošću samo kada se broj unese u kontrolu.
Provjera valjanosti obrasca 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 stupio u interakciju s kontrolom
- $važeći – Sadržaj polja je valjan
- $nevažeći – Sadržaj polja je nevažeći
- $netaknuta – Korisnik još nije stupio u interakciju s kontrolom
U nastavku su navedeni koraci koje je potrebno slijediti za provedbu Angular validacije.
Korak 1) Koristite svojstvo no validate kada deklarirate obrazac. Ovo svojstvo govori HTML5 da će provjeru valjanosti obaviti AngularJS.
Korak 2) Provjerite ima li obrazac definiran naziv. Razlog za to je taj što će se prilikom izvođenja Angular provjere koristiti naziv obrasca.
Korak 3) Osigurajte da svaka kontrola također ima definiran naziv. Razlog za to je taj što će se prilikom izvođenja Angular validacije koristiti naziv kontrole.
Korak 4) Koristite ng-show direktivu za provjeru svojstava $dirty, $invalid i $valid za kontrole.
Pogledajmo primjer koji uključuje gore navedene korake.
U našem primjeru,
Imat ćemo samo jednostavno tekstualno polje u koje korisnik treba unijeti naziv teme u tekstualni okvir. Ako se to ne učini, pokrenut će se pogreška provjere valjanosti, a korisniku će se prikazati poruka o pogrešci.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Objašnjenje koda
- Imajte na umu da smo obrascu dali ime koje je "myForm". Ovo je potrebno kada pristupate kontrolama na obrascu za AngularJS provjeru valjanosti.
- Korištenje svojstva "novalidate" za osiguravanje da HTML obrazac omogućuje AngularJS-u da izvrši provjeru valjanosti.
- Koristimo direktivu ng-show za provjeru svojstva “$dirty” i “$invalid”. To znači da ako je tekstni okvir izmijenjen, tada će vrijednost svojstva “$dirty” biti istinita. Također, u slučaju kada je vrijednost tekstualnog okvira nula, svojstvo “$invalid” će postati istinito. Dakle, ako su oba svojstva istinita, tada provjera valjanosti neće uspjeti za kontrolu. Dakle, ako su obje vrijednosti istinite, ng-show će također postati istinit i prikazat će se kontrola raspona sa znakovima crvene boje.
- U ovome provjeravamo svojstvo "$error" koje također daje vrijednost true jer smo za kontrolu spomenuli da treba unijeti vrijednost za kontrolu. U tom slučaju, ako nema unesenih podataka u tekstualni okvir, kontrola raspona prikazat će tekst "Potrebno je korisničko ime".
- Ako je vrijednost kontrole tekstualnog okvira nevažeća, također želimo onemogućiti gumb za slanje tako da korisnik ne može poslati obrazac. Koristimo svojstvo "ng-disabled" za kontrolu kako bismo to učinili na temelju uvjetne vrijednosti svojstva "$dirty" i "$invalid" kontrole.
- U kontroleru samo postavljamo početnu vrijednost tekstualnog okvira na tekst 'AngularJS'. Ovo se samo radi kako bi se postavila neka zadana vrijednost tekstualnog okvira kada se obrazac prvi put prikaže. Bolje prikazuje kako se provjera valjanosti odvija za polje tekstnog okvira.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz
Kada se obrazac prvi put prikaže, tekstni okvir prikazuje vrijednost "AngularJS" i omogućen je "gumb za slanje". Čim uklonite tekst iz kontrole, poruka o pogrešci provjere je omogućena, a gumb Pošalji je onemogućen.
Gornji snimak zaslona prikazuje dvije stvari
- Gumb Pošalji je onemogućen
- Nema naziva teme u tekstualnom okviru Tema. Stoga ispaljuje poruku o pogrešci "Potrebno je korisničko ime."
Provjera obrasca pomoću AngularJS Auto Validate
U AngularJS-u postoji mogućnost automatske provjere 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 pod nazivom "jcs-AutoValidate."
S ovim modulom ne trebate postavljati nikakav poseban kod za provođenje provjere valjanosti ili prikaz poruka o pogreškama. Sve to rješava kod unutar JCS-AutoValidate.
Pogledajmo jednostavan primjer kako to postići.
U ovom primjeru
Imat ćemo samo jednostavan obrazac s kontrolom tekstualnog okvira što je obavezno polje. Ako ova kontrola nije popunjena, trebala bi se prikazati poruka o pogrešci.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Objašnjenje koda
- Prvo, moramo uključiti skriptu "jcs-auto-validate.js" koja ima sve funkcije automatske provjere valjanosti.
- Moramo osigurati da je svaki element uključujući "div tag" smješten u klasu "form-group".
- Također je potrebno osigurati da je svaki element (koji je HTML element kao što je kontrola unosa, kontrola raspona, div kontrola i tako dalje) kao što su kontrole unosa također smješten 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 kôd u pregledniku.
Izlaz
Prema zadanim postavkama kada pokrenete svoj kod, gornji obrazac će biti prikazan prema HTML kodu.
Ako pokušate poslati obrazac, pojavit će se poruka o pogrešci koja kaže: "Ovo polje je obavezno." Sve to radi opcija JCS-AutoValidate.
Povratne informacije korisnika s Ladda gumbima
Gumbi "ladda" poseban je okvir izgrađen za gumbe na vrhu JavaScript kako bi gumbi dobili vizualni učinak kada se pritisnu.
Dakle, ako gumb dobije atribut "ladda" i pritisne ga, prikazat će se učinak vrtnje. Također, dostupni su različiti stilovi podataka za gumb za pružanje dodatnih vizualnih efekata.
Pogledajmo primjer kako vidjeti gumbe "ladda" na djelu. Upravo ćemo vidjeti jednostavan obrazac koji ima gumb za slanje. Kada se gumb pritisne, na gumbu će se prikazati efekt vrtnje.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Objašnjenje koda
- Koristimo "ng-podnesi” za pozivanje funkcije pod nazivom “pošalji”. Ova funkcija će se koristiti za promjenu atributa ladda gumba za slanje.
- Atribut ladda poseban je atribut okvira ladda. Upravo ovaj atribut dodaje kontrolu vrtnje. Postavljamo vrijednost atributa ladda varijabli koja se šalje.
- Svojstvo data-style opet je dodatni atribut koji nudi okvir ladda, koji samo dodaje drugačiji vizualni efekt gumbu za slanje.
- Modul 'AngularJS-ladda' potrebno je dodati u aplikaciju AngularJS.JS kako bi okvir ladda radio.
- U početku definiramo i postavljamo vrijednost varijable pod nazivom 'submitting' na false. Ova je vrijednost postavljena za atribut ladda gumba za slanje. Početnim postavljanjem na false mi kažemo da još ne želimo da gumb za slanje ima ladda efekt.
- 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 kôd u pregledniku.
Izlaz
Kada se obrazac prvi put prikaže, gumb za slanje prikazuje se u jednostavnom obliku.
Kada se pritisne gumb za slanje, varijabla za slanje u kontroleru postavljena je na istinito. Ova se vrijednost prosljeđuje atributu "ladda" gumba za slanje koji uzrokuje učinak vrtnje gumba.
Rezime
- Validacija za HTML kontrole tekstnog okvira može se izvršiti korištenjem atributa 'required'.
- U HTML5 su dodane nove kontrole kao što su lozinka, e-pošta i broj koji pružaju vlastiti skup provjera valjanosti.
- Provjera valjanosti obrasca u AngularJS-u obavlja se gledanjem $dirty, $valid, $invalid i $pristine vrijednosti kontrole obrasca.
- Automatska provjera valjanosti u AngularJS aplikacijama također se može postići korištenjem JCS-auto validate modula.
- Gumbi Ladda mogu se dodati aplikaciji Angular.js kako bi se korisniku pružio malo poboljšanog vizualnog osjećaja kada se gumb pritisne.
