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.
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:
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:
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:
Î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:
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ă.
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.
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:
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.