Cum se implementează validarea formularului în unghiular JS?

Validarea este o metodă pentru autentifica utilizatorul. Este folosit în toate tehnologiile web cum ar fi și . Dar astăzi accentul nostru va fi pe validarea în angular JS în următoarea ordine:

• Ce este validarea formularului?
• Validarea formularului în JS unghiular
• Pași în validarea formularului
• Cod

Ce este validarea formularului?

Validarea formularului este o tehnică prin care putem valida formularul HTML. Să luăm un exemplu simplu pentru a presupune că un utilizator are un formular HTML și că formularul HTML are câmpuri diferite, aceste câmpuri sunt validate de validatorul formularului atunci când dorim să validăm formularul, trebuie doar să verificăm valoarea câmpului special cu expresia validatorului .

Dacă expresia regulată și valoarea câmpului sunt aceleași, atunci putem spune că formularul nostru este validat. În formularul HTML, există diferite tipuri de validări, cum ar fi e-mail, obligatoriu, minim, maxim, parolă etc.

Validarea formularului în JS unghiular

Să vorbim despre cum putem valida un formular în JS unghiular. Angular JS oferă diferite tipuri de proprietăți de validare a formularului pe care le putem folosi pentru a valida formularul sau pentru a obține datele din formular.

• $ valabil : Această proprietate spune dacă câmpul este valid sau nu, aplicând regula corespunzătoare pe aceasta.

• $ invalid : După cum denumirea este nevalidă, această gresie este vremea, câmpul este nevalid sau nu se bazează pe regulile corespunzătoare.

• $ curat : Se va întoarce adevărat în câmpul de introducere a formularului nu este utilizat.

  
  
  

• $ murdar : Se va întoarce adevărat în câmpul de introducere a formularului.

  cum se declară matricea dinamică în java

• $ atins : Boolean Adevărat dacă intrarea a fost neclară.

Pentru a accesa formularul: .

Pentru a accesa o intrare: ..

Acum, să explicăm validarea formularului în JS unghiular cu un exemplu, așa că mai întâi facem două fișiere, unul este app.js și altul este index.html. Fișierul nostru index.htm conține un formular HTML simplu care are validarea unghiulară, iar fișierul nostru app.js conține codul backend pentru a gestiona validarea formularului pe pagina index.html.

index.htmlconținutul paginii se formează cunovalidateproprietate și ce înseamnă asta exact?

Proprietatea novalidate din eticheta formularului spune HTML că putem folosi validarea formularului personalizat. Dacă nu oferim proprietatea novalidate, atunci și formularul HTML se validează utilizând proprietățile implicite de validare a formularului HTML5.

Pași în validarea formularului

În formularul nostru, am creat 6 câmpuri în formularul nostru, acestea fiind prenume, prenume, e-mail, telefon, parolă și mesaj.

1. Mai întâi, adăugăm validatorul de câmp necesar, acest validator le spune utilizatorilor că este necesar un câmp specific.

2. Următorul este câmpul de e-mail dacă un utilizator nu dă niciun e-mail valid atunci validatorul nostru de e-mail aruncă o eroare de validare a e-mailului.

3. Stabilim lungimea minimă și maximă în validarea parolei, lungimea minimă este 5 și lungimea maximă este 8, astfel încât utilizatorul să poată da o parolă validă între 5 și 8 caractere.

4. În cele din urmă, setăm câmpurile de telefon și mesaj necesare și, în mod specific, aplicăm validarea numărului pe telefonul depus.

Cod pentru validarea formularului în JS unghiular

index.html

Exemplu de domeniu unghiular Prenume 
 
Acest dosar este obligatoriu
java convertind binar în zecimal
Numele de familie 
 
Acest dosar este obligatoriu
E-mail 
 
Acest dosar este obligatoriu
 
Nu este un e-mail valid
Telefon 
 
Acest dosar este obligatoriu
 
Acesta nu este un telefon valid
Parola 
 
Acest dosar este obligatoriu
 
Parolă între 5 și 8 caractere
Mesaj 
 
Acest dosar este obligatoriu
Trimite

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', funcție ($ scope) {})

Să vorbim despre unele directive de validare utilizate în formularul:

• ng-obligatoriu : Pentru furnizarea câmpului necesar
• ng-show : Pentru a afișa mesajul de eroare pe baza condiției (verificați proprietățile de validare)
• de lungime minima : Pentru asigurarea lungimii minime
• ng-lungime maximă : Pentru asigurarea lungimii maxime
• de tipar : Pentru a se potrivi cu un model specific
• ng-model : Legează câmpul cu proprietăți de validare precum $ error, $ valid etc.

Cu aceasta, ajungem la sfârșitul acestui articol de validare în Angular JS. Sper că ați înțeles diferitele lucruri care trebuie luate în considerare pentru validarea formularului în Angular JS.

Dacă doriți să aflați mai multe despre cadrul angular, consultați pagina noastră care vine cu instruire live condusă de instructor și experiență de proiect din viața reală. Această instruire vă va ajuta să înțelegeți în profunzime Angular și vă va ajuta să obțineți stăpânirea asupra subiectului.

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a acestui articol și vă vom răspunde.