Validarea este procesul care asigură că datele sunt corecte și complete.
Într-un exemplu din lumea 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 va avea câmpuri de introducere pentru numele de utilizator, parola, ID-ul de e-mail și așa mai departe.
Când utilizatorul trimite formularul, în mod normal o validare ar avea loc mai întâi înainte ca detaliile să fie trimise la server. Această validare ar încerca să asigure, în cea mai bună măsură posibilă, că detaliile pentru câmpurile de intrare sunt introduse în modul corect.
De exemplu, ID-ul de e-mail trebuie să fie întotdeauna într-un format de Această adresă de e-mail este protejată de spamboți. Aveți nevoie de JavaScript activat pentru ao vizualiza. ; 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 privește efectuarea acestor verificări de bază înainte ca detaliile să fie trimise la server pentru procesare ulterioară.
În acest tutorial, veți învăța-
- Validarea formularului utilizând HTML5
- Validarea formularului utilizând $ murdar, $ valid, $ invalid, $ curat
- Validarea formularului utilizând AngularJS Auto Validate
- Feedback-ul utilizatorului cu butoane Ladda
Validarea formularului utilizând HTML5
Validarea formularului este procesul de validare prealabilă a informațiilor introduse de un utilizator pe un formular web înainte de a fi trimise la server. Este întotdeauna mai bine să validați informațiile din partea clientului. Acest lucru se datorează faptului că adaugă mai puține cheltuieli generale dacă utilizatorul trebuia să fie prezentat din nou cu formularul dacă informațiile introduse erau greșite.
Să aruncăm o privire asupra modului în care poate fi efectuată validarea formularului în HTML5.
În exemplul nostru, vom arăta utilizatorului un formular simplu de înregistrare în care utilizatorul trebuie să introducă detalii precum un nume de utilizator, o parolă, un ID de e-mail și vârsta.
Formularul va avea controale de validare pentru a se asigura că utilizatorul introduce informațiile într-un mod adecvat.
Event Registration Guru99 Global Event
Explicatie cod:
- 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, iar un anumit tip 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 Această adresă de e-mail este protejată de spamboți. Aveți nevoie de JavaScript activat pentru ao vizualiza. .
- 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ă când rulați codul în browser.
Ieșire:
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 va arăta o eroare de validare că câmpul trebuie completat.
Deci, validarea controlului 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 Trimiteți. După ce se face clic pe butonul de trimitere, va apărea o fereastră pop-up care arată o eroare de validare pe care 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 caractere în controlul textului de vârstă, acesta nu va fi introdus pe ecran. Controlul se va completa doar cu o valoare atunci când un număr este introdus în control.
Validarea formularului utilizând $ murdar, $ valid, $ invalid, $ curat
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
- $ curat - Utilizatorul nu a interacționat încă cu controlul
Mai jos sunt pașii care trebuie urmați pentru a efectua validarea unghiulară.
Pasul 1) Utilizați proprietatea fără validare atunci când declarați formularul. Această proprietate spune HTML5 că validarea ar fi făcută de AngularJS.
Pasul 2) Asigurați-vă că formularul are un nume definit pentru acesta. Motivul pentru care se face acest lucru este că, atunci când se efectuează validarea unghiulară, va fi folosit numele formularului.
Pasul 3) Asigurați-vă că fiecare control are, de asemenea, un nume definit pentru acesta. Motivul pentru care se face acest lucru este că, atunci când se efectuează validarea unghiulară, se va utiliza numele controlului.
Pasul 4) Utilizați directiva ng-show pentru a verifica proprietățile $ dirty, $ invalid și $ valid pentru controale.
Să vedem 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, iar mesajul de eroare va fi afișat utilizatorului.
Event Registration Guru99 Global Event
Explicatie cod:
- Rețineți că am dat un nume pentru formularul care este „MyForm”. Acest lucru este necesar atunci când accesați comenzile din formular 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 proprietățile „$ dirty” și „$ invalid”. Aceasta înseamnă că, dacă caseta de text a fost modificată, atunci valoarea proprietății „$ murdar” 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 adevărat și va fi afișat controlul span cu caracterele de culoare roșie.
- În acest sens, verificăm proprietatea „$ error”, care se evaluează și ca fiind adevărată, deoarece am menționat pentru control că trebuie introdusă valoarea pentru control. Într-un astfel de caz, în care nu există date introduse în caseta de text, controlul intervalului va afișa textul „Nume utilizator este necesar”.
- Dacă valoarea de control a casetei de text este nevalidă, 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ționale a proprietăților „$ murdar” și „$ nevalid” al controlului.
- În controler, doar setăm valoarea inițială a valorii casetei de text pe textul „AngularJS”. Acest lucru se face doar pentru a seta o anumită valoare implicită la caseta de text atunci când formularul este afișat pentru prima dată. Prezintă mai bine modul în care are loc validarea pentru câmpul casetei de text.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
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 de pe control, mesajul de eroare de validare este activat, iar butonul Trimite este dezactivat.
Captura de ecran de mai sus afișează două lucruri
- Butonul 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 utilizând AngularJS Auto Validate
Există o facilitate în AngularJS pentru a valida automat toate controalele dintr-un formular 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 JCS-AutoValidate.
Să vedem un exemplu simplu de cum să realizăm acest lucru.
În acest exemplu,
Vom avea doar un formular simplu cu un control de casetă text care este un câmp obligatoriu. Dacă acest control nu este completat, trebuie afișat un mesaj de eroare.
Event Registration Guru99 Event
Explicatie cod:
- Mai întâi, trebuie să includem scriptul "jcs-auto-validate.js", care are toate funcționalitățile de validare automată.
- Trebuie să ne asigurăm că fiecare element, inclusiv „div tag” este plasat într-o clasă „grup-formular”.
- 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 comenzile de intrare, sunt plasate, de asemenea, în clasa grup-formular.
- Includeți jcs-autovalidarea în modulul dvs. AngularJS JS.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Î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 mesajul de eroare care va spune „Acest câmp este obligatoriu”. Toate acestea sunt realizate de opțiunea JCS-AutoValidate.
Feedback-uri utilizatorilor cu butoane Ladda
Butoanele „ladda” sunt un cadru special creat pentru butoanele de deasupra JavaScript pentru a da un efect vizual butoanelor atunci când sunt apăsate.
Deci, dacă unui buton i se dă atributul „ladda” și este apăsat, va fi afișat un efect de rotire. De asemenea, există diferite stiluri de date disponibile pentru buton pentru a oferi efecte vizuale suplimentare.
Să vedem un exemplu despre cum să vezi 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.
Event Registration Guru99 Event
Explicatie cod:
- Folosim directiva „ng-submit” pentru a apela o funcție numită „submit”. Această funcție va fi utilizată pentru a schimba atributul ladda al butonului de trimitere.
- Atributul ladda este un atribut special al cadrului ladda. Acest atribut adaugă efectul de centrifugare la control. Stabilim valoarea atributului ladda la variabila de trimitere.
- Proprietatea stil de date este din nou un atribut suplimentar oferit de cadrul ladda, care adaugă doar 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 numite „trimiterea” la fals. Această valoare este setată pentru atributul ladda al butonului de trimitere. Setând inițial acest lucru la fals, spunem că nu dorim ca butonul de trimitere să aibă efectul ladda încă.
- Declarăm o funcție care este apelată la apăsarea butonului 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ă când rulați codul în browser.
Ieșire:
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 trecută în atributul „ladda” al butonului de trimitere, care determină efectul de rotire al butonului.
rezumat
- Validarea pentru controalele HTML din caseta de text se poate face utilizând atributul „obligatoriu”.
- În HTML5, există noi controale adăugate, cum ar fi parola, adresa de e-mail și numărul care oferă propriul set de validări.
- Validarea formularului în AngularJS este luată în considerare valorile $ murdare, $ valide, $ invalide și $ incontestabile ale unui control de formular.
- Validarea automată în aplicațiile AngularJS poate fi realizată și prin utilizarea modulului de validare JCS-auto.
- Butoanele Ladda pot fi adăugate la o aplicație Angular.js pentru a oferi utilizatorului o senzație vizuală îmbunătățită atunci când butonul este apăsat.