AngularJS implémente le formulaire validation

Bien que je ne sois pas un programmeur front-end, je comprends à quel point il est important de faire une vérification sur le front-end.

Parce que de cette façon, le backend peut prendre une pause, et comparé au backend, le frontend peut réellement améliorer le bonheur de l'utilisateur.

AngularJS fournit une fonction de validation de formulaire très pratique, qui est enregistrée ici.

Commencez d'abord avec le code suivant

Copier le code Le code est le suivant :

Quelques options de validation pour les balises d'entrée, généralement utilisées en conjonction avec les balises HTML5.

Obligatoire

Longueur

Utilisez la commande ng-minlength/ng-maxlength

Format spécifique
Par exemple, e-mail, URL, numéro, définissez simplement le type sur le type correspondant, par exemple :

Copier le code Le code est le suivant :

Correspondance de motifs

Utilisez la directive ng-pattern, par exemple :

Copier le code Le code est le suivant :

Propriétés du formulaire qui facilitent les opérations sur le formulaire

vierge/sale

Indique s'il a été modifié, comme

Copier le code Le code est le suivant :

Accès en mode formName.fieldName.$pristine, l'entrée doit avoir une déclaration ng-model.

Copier le code Le code est le suivant :

valide/invalide

indique si la vérification est réussie.

Copier le code Le code est le suivant :

$erreur

Informations de vérification du formulaire, les informations correspondantes seront renvoyées en cas d'échec de la vérification.

AngularJS fournit la classe CSS correspondante pour l'état du formulaire

Copier le code Le code est le suivant :

.ng-vierge

.ng-sale

.ng-valid

.ng-invalide

Par exemple, faites en sorte que la vérification soit réussie en vert et l'échec en rouge :

Copier le code Le code est le suivant :

input.ng-valid {

Couleur : vert ;

>

input.ng-invalid {

Couleur : vert ;

>

Dans l'exemple donné, une seule vérification par e-mail est écrite. Si vous ajoutez plusieurs champs, plusieurs invites différentes et plusieurs événements, le code deviendra compliqué.

Ce n'est en fait pas recommandé, nous avons une meilleure solution.
Utilisez simplement angulaire-messages.js

Tout d’abord, n’oubliez pas ces deux étapes

Copier le code Le code est le suivant :

angulaire.module('myApp', ['ngMessages'])

D'accord, remplacez d'abord ces doublons par ng-messages et ng-message. L'exemple ci-dessus devient :

Copier le code Le code est le suivant :

E-mail :
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" obligatoire />

Un e-mail est requis.

Adresse e-mail invalide.

min durée 10

longueur maximale 50

Il n'y a aucun changement dans la fonctionnalité, juste que tous les codes en double ont été supprimés.

Faites attention à la distinction entre ng-messasges et ng-message. Cela ressemble-t-il un peu à with() ? Le ng-messages-multiple suivant est utilisé ici pour faire apparaître plusieurs invites en même temps.

Mais ce n'est toujours pas suffisant. Même si le contenu de ng-message est omis, il y aura toujours une duplication lorsque la vérification requise existe dans plusieurs champs.

De plus, si les formulaires des différentes pages impliquent tous le même contenu, les invites de vérification seront de plus en plus répétées.
Pour résoudre ce problème, nous pouvons utiliser la directive ng-messages-include.
Cette directive est utilisée pour référencer un modèle. Par exemple, l'exemple ci-dessus devient :

Copier le code Le code est le suivant :

E-mail :
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" obligatoire />

Ce n’est pas compliqué, ajoutons quelques choses supplémentaires.
Afin de rendre l'invite plus conviviale (?), essayons d'obtenir l'effet d'une invite apparaissant après le départ du curseur.
À l’heure actuelle, il sera beaucoup plus pratique d’utiliser des directives. Ici, nous aborderons d’abord certains contenus liés aux directives.

Exécutons-le d'abord :

Copier le code Le code est le suivant :

var monApp = angulaire.module('monApp',[])
.controller('validationController', ['$scope',function($scope) {
          $scope.user = 'Kavlez';
$scope.email = 'sweet_dreams@aliyun.com';
}])
.directive('hintOnBlur', [function() {
         revenir {
             require : 'ngModel',
              lien : fonction (portée, élément, attrs, ctrl) {
ctrl.focused = false;
                      element.bind('focus', function(evt) {
scope.$apply(function() {ctrl.focused = true;});
                    }).bind('blur', function(evt) {
scope.$apply(function() {ctrl.focused = false;});
                });
            }
>
}]);

Ici, nous utilisons focus pour déterminer si le curseur est sur un certain attribut. Lorsque l'événement focus ou Blur se produit sur l'objet à l'aide de la directive soupçonOnBlur, l'état focalisé change.

Le formulaire sera également modifié en conséquence. La méthode d'utilisation est la suivante :

Copier le code Le code est le suivant :

E-mail :

Ajoutez le jugement focus à ng-show, et une invite apparaîtra lorsqu'elle est fausse.

Ça ressemble à ça maintenant.

Personnalisez la méthode de vérification et la validité, qui utilisent également des directives.

Vérifiez si l'adresse email renseignée est déjà occupée. Voici une simulation simple :

Copier le code Le code est le suivant :

.directive('isAlreadyTaken', function() {
    revenir {
        exiger : 'ngModel',
        lien : fonction (portée, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                pour (var i=0;i                     si(val==emailTable[i])
                        revenir ;
                ctrl.$setValidity('emailAvailable', true);
                val de retour ;
            })
        >
    >
})

L'entrée元素中加上est-déjà-prise属性，并且再加一个ng-message :

复制代码代码如下 :

Déjà pris ! essayez d'autres adresses e-mail !

Étiquettes associées：

angularjs 表单验证

source：php.cn

Article précédent：js pour déterminer sur quel bouton gauche, central ou droit de la souris vous avez cliqué_compétences javascript Article suivant：Tutoriel de développement de plug-ins JavaScript (3)_compétences javascript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur