La validation est une méthode pour authentifier l'utilisateur. Il est utilisé dans toutes les technologies Web comme et . Mais aujourd'hui, nous nous concentrerons sur la validation dans Angular JS dans l'ordre suivant:
- Qu'est-ce que la validation de formulaire?
- Validation de formulaire dans Angular JS
- Étapes de la validation de formulaire
- Code
Qu'est-ce que la validation de formulaire?
La validation de formulaire est une technique par laquelle nous pouvons valider le formulaire HTML. Prenons un exemple simple pour supposer qu'un utilisateur a un formulaire HTML et que le formulaire HTML a différents champs, ces champs sont validés par le validateur de formulaire lorsque nous voulons valider le formulaire il nous suffit de vérifier la valeur du champ particulier avec l'expression du validateur .
Si l'expression régulière et la valeur du champ sont identiques, nous pouvons dire que notre formulaire est validé. Dans le formulaire HTML, il existe différents types de validations comme l'email, obligatoire, min, max, mot de passe, etc.
Validation de formulaire dans Angular JS
Voyons comment nous pouvons valider un formulaire en JS angulaire. Angular JS fournit différents types de propriétés de validation de formulaire que nous pouvons utiliser pour valider le formulaire ou obtenir les données du formulaire.
$ valide : Cette propriété indique si le champ est valide ou non en appliquant la règle appropriée à ce sujet.
$ invalide : Comme son nom l'indique invalide, cette mosaïque météo le champ est invalide ou n'est pas basé sur une règle appropriée à ce sujet.
$ vierge : Il retournera vrai dans le champ de saisie du formulaire n'est pas utilisé.
$ sale : Il retournera vrai dans le champ de saisie du formulaire utilisé.
$ touché : Booléen Vrai si l'entrée est floue.
Pour accéder au formulaire: .
Pour accéder à une entrée: ..
Maintenant, expliquons la validation de formulaire dans angular JS avec un exemple, donc tout d'abord nous créons deux fichiers, l'un est app.js et l'autre est index.html. Notre fichier index.htm contient un formulaire HTML simple qui a la validation angulaire et notre fichier app.js contient le code backend pour gérer la validation du formulaire sur la page index.html.
Laindex.htmlformulaire de contenu de page avecnovalidatepropriété et ce que cela signifie exactement?
La propriété novalidate dans la balise form indique au HTML que nous pouvons utiliser notre validation de formulaire personnalisée. Si nous ne donnons pas la propriété novalidate, le formulaire HTML est validé en utilisant les propriétés de validation de formulaire par défaut HTML5.
Étapes de la validation de formulaire
Dans notre formulaire, nous avons créé 6 champs dans notre formulaire: prénom, nom, email, téléphone, mot de passe et message.
Tout d'abord, nous ajoutons le validateur de champ requis, ce validateur indique aux utilisateurs qu'un champ spécifique est requis.
Vient ensuite le champ e-mail si un utilisateur ne donne aucun e-mail valide, notre validateur d'e-mail génère une erreur de validation d'e-mail.
Nous définissons la longueur minimale et la longueur maximale dans notre validation de mot de passe, la longueur minimale est de 5 et la longueur maximale est de 8 afin que l'utilisateur puisse donner un mot de passe valide entre 5 et 8 caractères.
Enfin, nous définissons le téléphone et les champs de message requis et, plus précisément, appliquons la validation du numéro sur le téléphone déposé.
Code pour la validation de formulaire dans Angular JS
index.html
Exemple de portée angulaire Prénom
Ce fichier est obligatoire
Nom de famille
Ce fichier est obligatoire
Email
Ce fichier est obligatoire
Pas un email valide
Téléphone
Ce fichier est obligatoire
Ce n'est pas un téléphone valide
Mot de passe
Ce fichier est obligatoire
Mot de passe de 5 à 8 caractères
Message
Ce fichier est obligatoire
Soumettre
app.js
var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ scope) {})Parlons d'une directive de validation utilisée sous la forme:
comment démarrer aws cli
- ng-requis : Pour fournir le champ requis
- ng-show : Pour afficher le message d'erreur en fonction de la condition (vérifiez les propriétés de validation)
- de minlength : Pour fournir une longueur minimale
- ng-maxlength : Pour fournir la longueur maximale
- de-modèle : Pour correspondre à un modèle spécifique
- ng-modèle : Lie le champ avec des propriétés de validation telles que $ error, $ valid, etc.
Avec cela, nous arrivons à la fin de cet article Validation in Angular JS. J'espère que vous avez compris les différentes choses à prendre en compte pour la validation de formulaire dans Angular JS.
Si vous souhaitez en savoir plus sur le framework Angular, consultez notre qui s'accompagne d'une formation en direct animée par un instructeur et d'une expérience de projet réelle. Cette formation vous aidera à comprendre Angular en profondeur et vous aidera à maîtriser le sujet.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de cet article et nous vous recontacterons.