Validarea formularului AngularJS la trimitere: Exemplu de înregistrare
James Hartman
Validarea formularului în AngularJS
Validarea formularului în AngularJS este procesul prin care se asigură dacă datele introduse într-un formular sunt corecte și complete. Când un utilizator trimite formularul, validarea are loc mai întâi înainte ca detaliile să fie trimise la server. Procesul de validare asigură, în cea mai bună măsură posibilă, că detaliile pentru câmpurile de intrare sunt introduse în mod corect.
Într-un exemplu real, să presupunem un site care necesită completarea unui formular de înregistrare înainte de a obține acces complet la acest site. Pagina de înregistrare ar avea câmpuri de introducere pentru numele de utilizator, parola, id-ul de e-mail și așa mai departe.
De exemplu, ID-ul de e-mail trebuie să fie întotdeauna într-un format de nume utilizator@site.domeniu; dacă cineva introduce doar numele de utilizator în ID-ul de e-mail, atunci în mod ideal, validarea ar trebui să eșueze. Deci, validarea se referă la efectuarea acestor verificări de bază înainte ca detaliile să fie trimise la server pentru procesare ulterioară.
Validarea formularelor folosind HTML5
Validarea formularului este procesul de prevalidare a informațiilor introduse într-un formular web de către utilizator înainte de a fi trimise la server. Este întotdeauna mai bine să validați informațiile de partea clientului în sine. Acest lucru se datorează faptului că adaugă mai puține cheltuieli generale dacă utilizatorului trebuia să i se prezinte din nou formularul dacă informațiile introduse au fost greșite.
Să aruncăm o privire la modul în care validarea formularelor AngularJS poate fi efectuată în HTML5.
În exemplul nostru, vom arăta utilizatorului un simplu formular de înregistrare în care utilizatorul trebuie să introducă detalii precum un nume de utilizator, parola, id-ul de e-mail și vârsta.
Formularul va avea controale de validare pentru a se asigura că utilizatorul introduce informațiile într-un mod corespunzător.
<!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>
Explicarea codului
- Pentru tipul de introducere a textului, folosim atributul „obligatoriu”. Aceasta înseamnă că caseta de text nu poate fi goală atunci când formularul este trimis și un fel de text ar trebui să fie prezent în caseta de text.
- Următorul tip de intrare este parola. Deoarece tipul de intrare este marcat ca parolă, atunci când utilizatorul introduce orice text în câmp, acesta va fi mascat.
- Deoarece tipul de intrare este specificat ca e-mail, textul din casetă trebuie să se potrivească cu modelul nume@site.domeniu.
- Când tipul de intrare este marcat ca număr, dacă un utilizator încearcă să introducă orice caracter folosind tastatura sau alfabetul, acesta nu va fi introdus în caseta de text.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser pentru validarea formularului AngularJS la trimitere.
producție
Pentru a vedea validarea formularului în acțiune, faceți clic pe butonul Trimiteți fără a introduce nicio informație pe ecran.
După ce se face clic pe butonul de trimitere, va apărea o fereastră pop-up care arată o eroare de validare că trebuie completat câmpul.
Deci, validarea pentru controlul care a fost marcat ca fiind necesar, face ca mesajul de eroare să fie afișat dacă utilizatorul nu introduce nicio valoare în câmpul de text.
Când utilizatorul introduce orice valoare în controlul parolei, veți observa simbolul „*” folosit pentru a masca caracterele introduse.
Să introducem apoi un cod de e-mail greșit și să facem clic pe butonul de trimitere. După ce se face clic pe butonul de trimitere, va apărea o fereastră pop-up care arată o eroare de validare că câmpul trebuie să aibă simbolul @.
Deci, validarea pentru controlul care a fost marcat ca un control de e-mail va face ca mesajul de eroare să fie afișat dacă utilizatorul nu introduce un ID de e-mail adecvat în câmpul de text.
În cele din urmă, când încercați să introduceți orice caracter în controlul textului de vârstă, acesta nu va fi introdus pe ecran. Controlul se va completa cu o valoare numai atunci când un număr este introdus în control.
Validarea formularului folosind $dirty, $valid, $invalid, $pristine
AngularJS oferă proprietățile sale suplimentare pentru validare. AngularJS oferă următoarele proprietăți pentru controale în scopuri de validare
- $murdar – Utilizatorul a interacționat cu controlul
- $valid – Conținutul câmpului este valid
- $invalid – Conținutul câmpului este nevalid
- $pristine – Utilizatorul nu a interacționat încă cu controlul
Mai jos sunt pașii care trebuie urmați pentru a efectua validarea unghiulară.
Pas 1) Utilizați proprietatea no validate atunci când declarați formularul. Această proprietate îi spune HTML5 că validarea va fi făcută de AngularJS.
Pas 2) Asigurați-vă că formularul are un nume definit pentru el. Motivul pentru care faceți acest lucru este că, la efectuarea validării unghiulare, va fi folosit numele formularului.
Pas 3) Asigurați-vă că fiecare control are și un nume definit pentru el. Motivul pentru care faceți acest lucru este că, la efectuarea validării unghiulare, va fi folosit numele controlului.
Pas 4) Folosește ng-show directivă pentru a verifica proprietățile $dirty, $invalid și $valid pentru controale.
Să ne uităm la un exemplu, care încorporează pașii menționați mai sus.
În exemplul nostru,
Vom avea doar un câmp de text simplu în care utilizatorul trebuie să introducă un nume de subiect în caseta de text. Dacă acest lucru nu se face, va fi declanșată o eroare de validare și mesajul de eroare va fi afișat utilizatorului.
<!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>
Explicarea codului
- Rețineți că am dat un nume pentru formular, care este „myForm”. Acest lucru este necesar la accesarea controalelor din formularul pentru validarea AngularJS.
- Utilizarea proprietății „novalidate” pentru a vă asigura că formularul HTML permite AngularJS să efectueze validarea.
- Folosim directiva ng-show pentru a verifica proprietatea „$dirty” și „$invalid”. Aceasta înseamnă că dacă caseta de text a fost modificată, atunci valoarea proprietății „$dirty” va fi adevărată. De asemenea, în cazul în care valoarea casetei de text este nulă, proprietatea „$invalid” va deveni adevărată. Deci, dacă ambele proprietăți sunt adevărate, atunci validarea va eșua pentru control. Prin urmare, dacă ambele valori sunt adevărate, ng-show va deveni și el adevărat și va fi afișat controlul span cu caracterele de culoare roșie.
- În aceasta, verificăm proprietatea „$error” care se evaluează, de asemenea, la adevărat, deoarece am menționat pentru control că valoarea trebuie introdusă pentru control. Într-un astfel de caz, în cazul în care nu există date introduse în caseta de text, controlul span va afișa textul „Numele de utilizator este necesar”.
- Dacă valoarea de control al casetei de text este invalidă, dorim și să dezactivăm butonul de trimitere, astfel încât utilizatorul să nu poată trimite formularul. Folosim proprietatea „ng-disabled” pentru control pentru a face acest lucru pe baza valorii condiționate a proprietății „$dirty” și „$invalid” a controlului.
- În controler, doar setăm valoarea inițială a valorii casetei de text la textul „AngularJS”. Acest lucru se face doar pentru a seta o valoare implicită pentru caseta de text atunci când formularul este afișat pentru prima dată. Prezintă mai bine cum are loc validarea pentru câmpul casetei de text.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
producție
Când formularul este afișat inițial, caseta de text afișează valoarea „AngularJS” și „butonul de trimitere” este activat. De îndată ce eliminați textul din control, mesajul de eroare de validare este activat și butonul Trimitere este dezactivat.
Captura de ecran de mai sus afișează două lucruri
- Butonul de trimitere este dezactivat
- Nu există un nume de subiect în caseta de text Subiect. Prin urmare, declanșează mesajul de eroare „Numele de utilizator este necesar”.
Validarea formularului folosind AngularJS Auto Validate
Există o facilitate în AngularJS pentru a valida toate controalele dintr-un formular în mod automat, fără a fi nevoie să scrieți cod personalizat pentru validare. Acest lucru se poate face prin includerea unui modul personalizat numit „jcs-AutoValidate”.
Cu acest modul instalat, nu este nevoie să plasați niciun cod special pentru a efectua validarea sau pentru a afișa mesajele de eroare. Toate acestea sunt gestionate de codul din interiorul JCS-AutoValidate.
Să ne uităm la un exemplu simplu despre cum să realizați acest lucru.
În acest exemplu,
Vom avea doar un formular simplu cu un control pentru caseta de text, care este un câmp obligatoriu. Ar trebui să fie afișat un mesaj de eroare dacă acest control nu este completat.
<!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>
Explicarea codului
- În primul rând, trebuie să includem scriptul „jcs-auto-validate.js” care are toată funcționalitatea de validare automată.
- Trebuie să ne asigurăm că fiecare element, inclusiv „eticheta div” este plasat într-o clasă „form-group”.
- De asemenea, trebuie să vă asigurați că fiecare element (care este un element HTML, cum ar fi controlul de intrare, controlul span, controlul div și așa mai departe), cum ar fi controalele de intrare, sunt de asemenea plasate în clasa grupului de formulare.
- Includeți jcs-autovalidate în modulul dvs. AngularJS JS.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
producție
În mod implicit, atunci când rulați codul, formularul de mai sus va fi afișat conform codului HTML.
Dacă încercați să trimiteți formularul, va apărea un mesaj de eroare care va spune „Acest câmp este obligatoriu”. Toate acestea se realizează prin opțiunea JCS-AutoValidate.
Feedback-ul utilizatorilor cu butoane Ladda
Butoanele „ladda” sunt un cadru special construit pentru butoanele de deasupra JavaScenariu pentru a da un efect vizual butoanelor atunci când sunt apăsate.
Deci, dacă unui buton i se atribuie atributul „ladda” și este apăsat, va fi afișat un efect de rotire. De asemenea, există diferite stiluri de date disponibile pentru butonul pentru a oferi efecte vizuale suplimentare.
Să ne uităm la un exemplu despre cum să vedeți butoanele „ladda” în acțiune. Vom vedea doar un formular simplu care are un buton de trimitere. Când butonul este apăsat, un efect de rotire va fi afișat pe buton.
<!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>
Explicarea codului
- Folosim „ng-submit” directivă pentru a apela o funcție numită „submit”. Această funcție va fi folosită pentru a schimba atributul ladda al butonului de trimitere.
- Atributul ladda este un atribut special al cadrului ladda. Acest atribut este cel care adaugă efectul de rotație controlului. Setăm valoarea atributului ladda la trimiterea variabilei.
- Proprietatea de stil de date este din nou un atribut suplimentar oferit de cadrul ladda, care doar adaugă un efect vizual diferit butonului de trimitere.
- Modulul „AngularJS-ladda” trebuie adăugat la aplicația AngularJS.JS pentru ca cadrul ladda să funcționeze.
- Inițial, definim și setăm valoarea unei variabile numită „submitting” la false. Această valoare este setată pentru atributul ladda al butonului de trimitere. Setând inițial acest lucru la fals, spunem că nu vrem ca butonul de trimitere să aibă încă efectul ladda.
- Declarăm o funcție care este apelată atunci când este apăsat butonul de trimitere. În această funcție, setăm „trimiterea” la adevărat. Acest lucru va face ca efectul ladda să fie aplicat butonului de trimitere.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
producție
Când formularul este afișat inițial, butonul de trimitere este afișat în forma sa simplă.
Când este apăsat butonul de trimitere, variabila de trimitere din controler este setată la adevărat. Această valoare este transmisă atributului „ladda” al butonului de trimitere, care provoacă efectul de rotire al butonului.
Rezumat
- Validarea pentru controalele HTML din caseta de text se poate face folosind atributul „required”.
- În HTML5, sunt adăugate noi controale, cum ar fi parola, e-mailul și numărul, care oferă propriul set de validări.
- Validarea formularului în AngularJS este luată în considerare analizând valorile $dirty, $valid, $invalid și $pristine ale unui control de formular.
- Validarea automată în aplicațiile AngularJS poate fi realizată și prin utilizarea modulului de validare automată JCS.
- Butoanele Ladda pot fi adăugate la o aplicație Angular.js pentru a oferi un pic de o senzație vizuală îmbunătățită utilizatorului atunci când butonul este apăsat.
