AngularJS implémente le formulaire validation_AngularJS

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 :

E-mail :
          
           
                                    Une adresse e-mail est requise.
                Adresse e-mail invalide.
                                                                                   

           

<script><br> angulaire.module('monApp',[])<br> .controller('validationController', ['$scope',function($scope) {<br> $scope.user = 'Kavlez';<br> $scope.email = <br>'sweet_dreams@aliyun.com'<a href="mailto:'sweet_dreams@aliyun.com'">;</a> }]);<br> </script>

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 :

{{mainForm.userEmail.$pristine}}
{{mainForm.userEmail.$dirty}}

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 !

Déclaration：

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

Article précédent：js pour déterminer sur quel bouton gauche, central ou droit de la souris vous avez cliqué_compétences javascriptArticle suivant：js pour déterminer sur quel bouton gauche, central ou droit de la souris vous avez cliqué_compétences javascript

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved