Ako implementovať overenie formulára v Angular JS?

Validácia je metóda na overiť používateľ. Používa sa vo všetkých webových technológiách ako a . Ale dnes sa zameriame na Validáciu v Angular JS v nasledujúcom poradí:

• Čo je to overenie formulára?
• Validácia formulára v Angular JS
• Kroky na overenie formulára
• Zákonníka

Čo je to overenie formulára?

Validácia formulárov je technika, pomocou ktorej môžeme overiť formulár HTML. Zoberme si jednoduchý príklad, aby sme predpokladali, že používateľ má formulár HTML a že formulár HTML má rôzne polia. Tieto polia sú validované validátorom formulárov, ak chceme overiť formulár, stačí skontrolovať hodnotu konkrétneho poľa pomocou výrazu validátora. .

Ak sú regulárny výraz a hodnota poľa rovnaké, môžeme povedať, že náš formulár je overený. Vo formulári HTML existujú rôzne typy overenia, ako je e-mail, povinné, min., Max., Heslo atď.

čo je tento operátor v Jave?

Validácia formulára v Angular JS

Poďme si povedať, ako môžeme overiť tvar v uhlovom JS. Angular JS poskytuje rôzne typy vlastností overovania formulárov, ktoré môžeme použiť na overenie formulára alebo na získanie údajov z formulára.

• $ platné : Táto vlastnosť určuje, či je pole platné alebo nie, a to uplatnením príslušného pravidla.

• $ neplatné : Ako názov hovorí, že táto dlaždica je počasia neplatná, pole je neplatné alebo nie na základe príslušného pravidla.

• $ nedotknutá : Vráti hodnotu true, ak sa vstupné pole formulára nepoužíva.

  
  
  

• $ špinavý : Vráti hodnotu true, ak sa použije vstupné pole formulára.

• $ dojatý : BooleanTrue, ak bol vstup rozmazaný.

Prístup do formulára: .

Prístup k vstupu: ..

Teraz si vysvetlíme validáciu formulára v uhlovom JS na príklade, takže najskôr vytvoríme dva súbory, jeden je app.js a druhý index.html. Náš súbor index.htm obsahuje jednoduchý formulár HTML, ktorý má uhlové overenie, a náš súbor app.js obsahuje back-endový kód na spracovanie overenia formulára na stránke index.html.

Theindex.htmlformulár obsahu stránky snovalidátmajetok a čo to znamená presne?

Vlastnosť novalidate v značke formulára informuje HTML, že môžeme použiť našu vlastnú validáciu formulára. Ak nezadáme vlastnosť novalidate, potom sa formulár HTML overí pomocou predvolených vlastností overenia formulára HTML5.

Kroky na overenie formulára

V našom formulári sme vytvorili 6 polí v našom formulári, ktorými sú meno, priezvisko, e-mail, telefón, heslo a správa.

1. Najskôr pridáme požadovaný validátor poľa, tento validátor informuje používateľov, že sa vyžaduje konkrétne pole.

2. Ďalej je e-mailové pole, ak používateľ neposkytne žiadny platný e-mail, potom náš e-mailový validátor hodí chybu overenia e-mailu.

3. V overovaní hesla sme nastavili minimálnu a maximálnu dĺžku, minimálna dĺžka je 5 a maximálna dĺžka 8, aby mohol používateľ zadať platné heslo v rozsahu 5 až 8 znakov.

4. Nakoniec nastavíme požadované polia telefónu a správ a konkrétne použijeme overenie čísla na telefóne.

Kód na overenie formulára v Angular JS

index.html

Príklad uhlového rozsahu Meno 
 
Toto pole je povinné
Priezvisko 
 
Toto pole je povinné
Email 
 
Toto pole je povinné
 
Neplatný e-mail
Telefón 
 
Toto pole je povinné
 
Toto nie je platný telefón
Heslo 
 
Toto pole je povinné
 
Heslo od 5 do 8 znakov
Správa 
 
Toto pole je povinné
Predložiť

app.js

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

Povedzme si niečo o overovacej smernici použitej vo forme:

• ng-požadované : Za poskytnutie požadovaného poľa
• ng-show : Ak chcete zobraziť chybové hlásenie na základe stavu (skontrolujte vlastnosti overenia)
• minimálnej dĺžky : Za poskytnutie minimálnej dĺžky
• ng-maxlength : Za poskytnutie maximálnej dĺžky
• vzoru : Aby zodpovedali konkrétnemu vzoru
• ng-model : Zviaže pole s vlastnosťami overenia, ako je $ error, $ valid, atď.

Týmto sa dostávame na koniec tohto článku Overenie v Angular JS. Dúfam, že ste pochopili rôzne veci, ktoré je potrebné vziať do úvahy pri validácii formulára v Angular JS.

Ak sa chcete dozvedieť viac o uhlovom rámci, pozrite si naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže pochopiť Angular do hĺbky a pomôže vám dosiahnuť osvojenie si predmetu.

Máte na nás otázku? Uveďte to prosím v sekcii komentárov tohto článku a my sa vám ozveme.