Validarea Formularului AngularJS cu ngMessages

Aproape fiecare site utilizează formulare pentru a efectua diferite sarcini, cum ar fi înscrierea utilizatorilor sau obținerea informațiilor de contact. Este foarte important să vă asigurați că utilizatorul care completează formularul introduce cel puțin informațiile valide în câmpurile de introducere. 

De asemenea, este necesar să se afișeze un mesaj detaliat de eroare utilizatorilor, astfel încât să poată completa formularul corect. Acest proces poate deveni foarte complicat atunci când trebuie să vă ocupați de o mulțime de elemente de formă, fiecare dintre ele având nevoie de propriile mesaje personalizate de eroare. Pentru a ușura durerea, Angular 1.3 a adăugat un nou modul numit ngMessages pentru a ajuta dezvoltatorii să valideze formularele cu ușurință.

Modulul ngMessages vă oferă posibilitatea de a afișa utilizatorilor dvs. mesaje de eroare personalizate fără a scrie cod repetitiv. În acest tutorial, veți învăța cum să utilizați acest modul pentru a valida formularele. Veți învăța, de asemenea, cum să încărcați mesajele de eroare în exterior și să afișați mesajele atunci când acestea sunt de fapt necesare.

Un exemplu de bază

Să începem prin validarea unui singur câmp de intrare cu și fără ajutorul ngMessages pentru a vedea utilitatea acestui modul. Fără a utiliza ngMessages, marcajul pentru elementul de intrare va arăta similar cu următorul cod:

Numele de utilizator trebuie să aibă cel puțin 6 caractere.

Numele de utilizator trebuie să aibă cel mult 12 caractere.

Furnizarea unui nume de utilizator este obligatorie.

De asemenea, veți avea nevoie de următorul cod JavaScript:

angular.module ("app", []);

Toate celelalte elemente de formă vor trebui validate în mod similar. Acest lucru va face markup-ul foarte repetitiv, crescand sansele de eroare. Dacă ați decis să utilizați ngMessages pentru a valida aceeași intrare a formularului, marcajul ar fi arătat similar cu următorul cod:

Numele de utilizator trebuie să aibă cel puțin 6 caractere.

Numele de utilizator trebuie să aibă cel mult 12 caractere.

Furnizarea unui nume de utilizator este obligatorie.

Codul JavaScript va deveni acum:

angular.module ('app', ['ngMessages']);

Aici, am folosit ng-mesaje directivă pentru a grupa împreună mesajele de eroare. Valoarea a trecut la ng-mesaje directiva urmează modelul formName.inputName. Eroare $. În cazul nostru, acest lucru este evaluat la formValidation.username. Eroare $

În mod similar, puteți obține și valoarea ng-mesaje directivă pentru toate celelalte domenii. ngMessages se bazează pe $ eroare obiect expus de directiva ngModel pentru a determina dacă mesajele de eroare ar trebui să fie afișate sau ascunse pe pagina web. Se bate prin $ eroare obiect în căutarea unei chei care să se potrivească cu valorile oricăror ng-mesaj directivă.

Iată un exemplu de lucru care arată codul de validare de mai sus în acțiune:

Validarea unui formular

În această secțiune, vom valida un formular cu un nume de utilizator, o parolă și un câmp de e-mail. Marcajul pentru formular va arăta similar cu următorul cod:

Numele de utilizator trebuie să aibă cel puțin 6 caractere.

Numele de utilizator trebuie să aibă cel mult 12 caractere.

Furnizarea unui nume de utilizator este obligatorie.

Numele de utilizator poate fi alfanumeric doar cu un subliniere opțională.

Parola trebuie să aibă cel puțin 6 caractere.

Parola trebuie să aibă cel mult 12 caractere.

Furnizarea unei parole este obligatorie.

te rog introdu o adresa de email valida.

Furnizarea unui e-mail este obligatorie.

După cum puteți vedea, marcajul necesar pentru validarea elementelor de formă diferite este foarte asemănător. O schimbare importantă în acest caz este adăugarea ng-model directivă. Modelul pe care îl folosim aici asigură că numele de utilizator introdus are numai caractere alfanumerice și un subliniere. \ w în / ^ \ W + $ / înseamnă caractere de tip A-Z, a-z, 0-9 și _.

Ar trebui să încercați să introduceți un nume de utilizator diferit în câmpul nume de utilizator. După un timp, veți observa că formularul nu se plânge de faptul că un caracter nu este alfanumeric dacă a fost introdus înainte de primele șase caractere sau după primele 12 caractere. Acest comportament nu este foarte ușor de utilizat. 

De exemplu, să presupunem că unii dintre utilizatorii dvs. încep să își folosească numele de utilizator cu un semn de exclamare. Ei vor trebui să aștepte până când au tastat șase mai multe caractere pentru a obține eroarea despre utilizarea numai a caracterelor alfanumerice. Va fi foarte frustrant pentru ei să înceapă să introducă din nou numele de utilizator de la început.

În mod implicit, ngMessages afișează numai o eroare pentru utilizator în același timp. Din acest motiv, mesajul despre caractere nevalabile nu a putut fi afișat înainte ca un utilizator să fi scris mai mult de șase caractere. Mai mult, ngMessages utilizează ordinea în care ați introdus mesajele de eroare ca sugestie pentru a determina prioritatea acestora. 

Dacă ați furnizat mesajul minim de caractere înainte de eroarea alfanumerică, ngMessages va aștepta până când eroarea minimă de caractere va fi rezolvată înainte de a afișa eroarea alfanumerică.

Aici este aceeași formă cu mesajele de eroare prezentate într-o ordine diferită.

De asemenea, puteți afișa simultan toate mesajele de eroare aplicabile unui utilizator folosind ng-mesaje multiple. Cu toate acestea, văzând mai multe mesaje de eroare de îndată ce utilizatorii încep să tasteze într-un câmp de intrare, pot să le copleșească.

Reutilizarea mesajelor de eroare

Există încă o mulțime de repetări în marcarea noastră. Dacă doriți să afișați același mesaj de eroare pentru diferite câmpuri de introducere, nu are sens să-l repetați pentru fiecare dintre acestea. Modulul ngMessages vă poate ajuta să scrieți mesaje de eroare generice o singură dată și să le includeți în forma dvs. ori de câte ori este nevoie. Aici este marcajul pentru a crea un formular care afișează mesaje de eroare generice utilizatorilor.

 

Numele de utilizator poate fi alfanumeric doar cu un subliniere opțională.

Numele de utilizator nu poate fi mai mare de 12 caractere.

Acest câmp este obligatoriu.

te rog introdu o adresa de email valida.

La fel ca și cazul precedent, prioritatea unui mesaj este determinată de locul său în șablon. De asemenea, puteți să înlocuiți mesajele generice furnizate în șablon incluzând un mesaj de eroare personalizat în câmpurile individuale. Mesajele de eroare pot fi de asemenea încărcate dintr-un fișier separat utilizând următorul cod:

Se afișează doar erorile când este necesar

Puteți face formularul dvs. mai ușor de utilizat, afișând mesaje de eroare numai atunci când un utilizator a făcut o eroare în timp ce completează formularele. De exemplu, puteți opta să afișați numai eroarea de câmp necesară atunci când un utilizator trece peste un element de intrare. 

Acest lucru poate fi realizat prin utilizarea fie a ng-show sau ng-if împreună cu $ a atins și $ murdar. În cazul în care $ a atins, mesajul de eroare este afișat imediat ce intrarea pierde focalizarea. În cazul în care $ murdar, mesajul de eroare apare imediat ce intrarea devine nevalidă.

Iată demo-ul care arată diferența dintre $ a atins și $ murdar.

Concluzie

În acest tutorial, ați aflat cât de ușor este să validați introducerea diferitelor tipuri de elemente de formă folosind ngMessages. De asemenea, ați învățat cum să reutilizați aceleași mesaje de eroare de mai multe ori pentru a evita repetarea și cum să acordați prioritate diferitelor mesaje de eroare. 

De asemenea, puteți utiliza împreună ngMessages și ngAnimate împreună pentru a utiliza animații personalizate pentru a afișa sau a ascunde mesajul de eroare. Un tutorial despre utilizarea modulului ngAnimate va fi publicat, de asemenea, în scurt timp pe Envato Tuts +.

Dacă există sfaturi pe care doriți să le împărtășiți cu cititorii colegi sau dacă aveți întrebări pe care doriți să le întrebați, anunțați-ne în comentariile.

Cod