Com implementar la validació de formularis a Angular JS?

La validació és un mètode per autenticar l’usuari. S'utilitza en totes les tecnologies web com i . Però avui ens centrarem en la validació en Angular JS en el següent ordre:

• Què és la validació de formularis?
• Validació de formularis en JS angular
• Passos per a la validació de formularis
• Codi

Què és la validació de formularis?

La validació de formularis és una tècnica mitjançant la qual podem validar el formulari HTML. Prenem un exemple senzill de suposar que un usuari té un formulari HTML i que aquest formulari HTML té camps diferents; aquests camps es validen mitjançant un validador de formulari quan volem validar el formulari, només hem de comprovar el valor del camp en concret amb l’expressió del validador. .

Si l'expressió regular i el valor del camp són els mateixos, podem dir que el nostre formulari està validat. Al formulari HTML, hi ha diferents tipus de validacions, com ara correu electrònic, obligatori, mínim, màxim, contrasenya, etc.

Validació de formularis en JS angular

Parlem de com podem validar un formulari en JS angular. Angular JS proporciona diversos tipus de propietats de validació del formulari que podem utilitzar per validar el formulari o obtenir les dades del formulari.

• $ vàlid : Aquesta propietat indica si el camp és vàlid o no aplicant-hi la regla adequada.

• $ no vàlid : Com el seu nom diu que no és vàlid, aquest camp no és vàlid o no es basa en la regla adequada.

• $ verge : Es tornarà cert si el camp d'entrada del formulari no s'utilitza.

  
  
  

• $ brut : Es tornarà cert si s'utilitza el camp d'entrada del formulari.

  codi de la sèrie Fibonacci a Java

• $ tocat : BooleanTrue si l'entrada s'ha difuminat.

Per accedir al formulari: .

Per accedir a una entrada: ..

Ara expliquem la validació del formulari en JS angular amb un exemple, de manera que primer fem dos fitxers, un és app.js i un altre és index.html. El nostre fitxer index.htm conté un formulari HTML senzill que té la validació angular i el nostre fitxer app.js conté el codi del dorsal per gestionar la validació del formulari a la pàgina index.html.

Elindex.htmlel contingut de la pàgina es forma ambnovalidarpropietat i què significa exactament això?

La propietat novalidate de l’etiqueta de formulari indica a l’HTML que podem utilitzar la nostra validació de formulari personalitzada. Si no donem la propietat novalidate, el formulari HTML es valida mitjançant propietats de validació de formulari predeterminades HTML5.

Passos per a la validació de formularis

Al nostre formulari, hem creat 6 camps al nostre formulari: nom, cognom, correu electrònic, telèfon, contrasenya i missatge.

1. En primer lloc, afegim el validador de camp obligatori, que indica als usuaris que cal un camp específic.

2. El següent és el camp de correu electrònic si un usuari no envia cap missatge de correu electrònic vàlid, el nostre validador de correu electrònic genera un error de validació de correu electrònic.

3. Establim la longitud mínima i màxima a la validació de la nostra contrasenya, la longitud mínima és 5 i la longitud màxima és 8, de manera que l'usuari pot donar una contrasenya vàlida d'entre 5 i 8 caràcters.

4. Finalment, establim el telèfon i els camps de missatge obligatoris i, específicament, apliquem la validació del número al telèfon presentat.

Codi de validació de formularis en JS angular

index.html

Exemple d'abast angular Primer nom 
 
Aquest fitxer és obligatori
tutorial de microsoft sql per a principiants
Cognom 
 
Aquest fitxer és obligatori
Correu electrònic 
 
Aquest fitxer és obligatori
 
No és un correu electrònic vàlid
Telèfon 
 
Aquest fitxer és obligatori
 
No és un telèfon vàlid
Contrasenya 
 
Aquest fitxer és obligatori
 
Contrasenya d'entre 5 i 8 caràcters
Missatge 
 
Aquest fitxer és obligatori
Presentar

app.js

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

Parlem d'alguna directiva de validació utilitzada en el formulari:

• ng-requerit : Per proporcionar el camp obligatori
• ng-show : Per mostrar el missatge d'error en funció de la condició (comproveu les propietats de validació)
• de longitud mínima : Per proporcionar una longitud mínima
• ng-longitud màxima : Per proporcionar la longitud màxima
• de patró : Per coincidir amb un patró específic
• ng-model : Vincula el camp amb propietats de validació com $ error, $ valid, etc.

Amb això, arribem al final d’aquest article de validació a Angular JS. Espero que tingueu una comprensió de les diverses coses que cal tenir en compte per a la validació de formularis a Angular JS.

Si voleu obtenir més informació sobre el marc angular, consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us ajudarà a comprendre en profunditat Angular i us ajudarà a dominar el tema.

Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris d’aquest article i us respondrem.