Bien que je ne sois pas un programmeur frontal, je comprends à quel point il est important de faire un bon travail de vérification sur le front-end.
Parce que de cette manière, le backend peut prendre plus de souffle, et par rapport au backend, le frontend peut en effet améliorer le sentiment de bonheur de l'utilisateur.
AngularJS offre une fonction de vérification de formulaire très pratique, enregistrez-la ici.
Commencez d'abord par le code suivant
La copie de code est la suivante:
<form ng-app = "myApp" ng-contrôleur = "validationController" name = "mainform" novalidate>
<p> Email:
<entrée type = "e-mail" name = "e-mail" ng-model = "e-mail" requis>
<span style = "Color: Red" ng-show = "mainform.email. $ sale && mainform.email. $ invalid">
<span ng-show = "mainform.email. $ error.requure"> e-mail est requis. </span>
<span ng-show = "mainform.email. $ error.email"> adresse e-mail non valide. </span>
</span>
</p>
<p>
<input type = "soumi" ng-disabled = "mainform. $ invalid">
</p>
</ form>
<cript>
angular.module ('myapp', [])
.Controller ('ValidationController', ['$ scope', fonction ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]);
</cript>
Certaines options de vérification pour les balises d'entrée sont généralement utilisées avec des balises HTML5.
Requis
<input type = "text" requis />
longueur
Utilisez la directive ng-minlength / ng-maxLength
<input type = "text" ng-minLength = "5" />
Format spécifique
Par exemple, e-mail, URL et numéro, définissez simplement le type sur le type correspondant, par exemple:
La copie de code est la suivante:
<input type = "email" name = "e-mail" ng-model = "user.email" />
<input type = "nombre" name = "age" ng-model = "user.age" />
<input type = "url" name = "homepage" ng-model = "user.facebook_url" />
Correspondance de motifs
Utilisez la directive ng-sattern, par exemple:
La copie de code est la suivante:
<input type = "text" ng-sattern = "[az]" />
Propriétés des formulaires, ces propriétés facilitent le fonctionnement des formulaires
Immorpores / sale
Indique s'il a été modifié, par exemple
La copie de code est la suivante:
<form name = "mainform" ng-controller = "orderController">
<input type = "email" name = "usemail" ng-model = "myemail" />
{{mainform.Useremail. $ vestime}}
{{mainform.Useremail. $ sale}}
</ form>
Consulté dans FormName.FieldName. $ Mode Pristine, la saisie doit avoir une déclaration de modèle NG.
La copie de code est la suivante:
valide / invalide
Indique s'il passe une vérification.
La copie de code est la suivante:
$ Erreur
Informations de vérification de formulaire et les informations correspondantes sont renvoyées en cas d'échec de la vérification.
AngularJS fournit la classe CSS en conséquence pour le statut de formulaire
La copie de code est la suivante:
.NG-PRISTIN
.NG-DIRTY
.ng-valide
.ng-invalide
Par exemple, laissez la vérification passer le vert et échouer en rouge:
La copie de code est la suivante:
input.ng-valid {
Couleur: vert;
}
input.ng-invalid {
Couleur: vert;
}
Dans l'exemple donné, une seule vérification par e-mail est tellement écrite. Si vous ajoutez quelques champs, ajoutez quelques invites différentes et ajoutez quelques événements, le code deviendra désordonné.
En fait, il n'est pas recommandé de le faire, nous avons une meilleure façon.
C'est utiliser des messages angulaires.js
Tout d'abord, n'oubliez pas ces deux étapes
La copie de code est la suivante:
<script src = "angular-messages.js"> </cript>
angular.module («myapp», [«ngmessages»])
Ok, remplacez d'abord ces doublons par Ng-Messages et Ng-Message, et l'exemple ci-dessus devient:
La copie de code est la suivante:
<form ng-controller = "validationController" name = "mainform">
<p> Email:
<entrée
type = "e-mail" name = "e-mail" ng-model = "myemail" ng-minlength = "3" ng-maxLength = "50" requis />
<div style = "Color: Red" ng-messages = "mainform.email. $ error" ng-messages-multiple>
<p ng-message = "requis"> un e-mail est requis. </p>
<p ng-message = "e-mail"> adresse e-mail non valide. </p>
<p ng-message = "minLength"> Longueur min 10 </p>
<p ng-message = "maxLength"> Longueur max 50 </p>
</div>
</p>
<p>
<input type = "soumi" ng-disabled = "mainform. $ invalid" />
</p>
</ form>
Il n'y a pas de changement de fonction, juste le code en double a été supprimé.
Faites attention à la distinction entre Ng-Messasges et Ng-Messages. Cela ressemble-t-il un peu à ()? Le Ng-Messages-Multiple derrière lui est utilisé pour faire apparaître plusieurs invites en même temps.
Mais ce n'est toujours pas assez bon. Même si le contenu dans NG-Message est omis, il y aura toujours une duplication lorsque la vérification nécessaire existe dans plusieurs champs.
De plus, il y aura de plus en plus d'invites de vérification répétées si les formulaires sur différentes pages impliquent le même contenu.
Pour résoudre ce problème, nous pouvons utiliser la directive Ng-Messages-include.
Cette directive est utilisée pour référencer les modèles, par exemple, l'exemple ci-dessus devient:
La copie de code est la suivante:
<form ng-controller = "validationController" name = "mainform">
<p> Email:
<entrée
type = "e-mail" name = "e-mail" ng-model = "myemail" ng-minlength = "3" ng-maxLength = "50" requis />
<div style = "Color: Red" ng-messages = "mainform.email. $ error" ng-messages-multiple ng-messages-include = "validatetemplate / email.html">
</div>
</p>
<p>
<input type = "soumi" ng-disabled = "mainform. $ invalid" />
</p>
</ form>
Ce n'est pas compliqué, ajoutons quelque chose.
Afin de rendre les invites plus amicales (?), Nous essayons d'atteindre l'effet des invites apparaissant après le départ du curseur.
Pour le moment, il sera beaucoup plus pratique d'utiliser des directives. Ici, nous impliquons d'abord certaines informations liées aux instructions.
Exécutez d'abord et parlez-en:
La copie de code est la suivante:
var myapp = angular.module ('myapp', [])
.Controller ('ValidationController', ['$ scope', fonction ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}])
.directive ('hintonblur', [function () {
retour {
exiger: «ngmodel»,
lien: fonction (scope, élément, attrs, ctrl) {
ctrl.focus = false;
element.bind ('focus', fonction (evt) {
scope. $ applique (function () {ctrl.focUsed = true;});
}). bind ('blur', fonction (evt) {
scope. $ applique (function () {ctrl.focUsed = false;});
});
}
}
}]);
Ici, nous utilisons ciblés pour déterminer si le curseur se trouve sur une certaine propriété. Lorsque l'événement focus ou flou se produit sur un objet utilisant la directive HintonBlur, l'état de mise au point a changé.
Le formulaire sera modifié comme suit:
La copie de code est la suivante:
<form ng-controller = "validationController" name = "mainform">
<p> Email:
<input type = "e-mail" name = "e-mail" ng-model = "myemail" ng-minilength = "3" ng-maxLength = "50" requis sur blur />
<div style = "Color: Red" ng-messages = "mainform.email. $ error" ng-show = "! Mainform.email.focus" ng-messages-multiple ng-messages-include = "validatetemplate / email.html">
</div>
</p>
<p>
<input type = "soumi" ng-disabled = "mainform. $ invalid" />
</p>
</ form>
Ajoutez le jugement de Focus dans NG-show, et une invite apparaît lorsqu'elle est fausse.
Cela ressemble à ça maintenant.
Personnaliser les méthodes de vérification et la validité, qui utilise également des directives.
Vérifiez que l'e-mail que vous avez rempli a occupé. Voici une simulation simple:
La copie de code est la suivante:
.Directive ('IsalreadyTaken', fonction () {
retour {
exiger: «ngmodel»,
lien: fonction (scope, ele, attrs, ctrl) {
Ctrl. $ parsers.push (fonction (val) {
ctrl. $ setValidité («e-mailavailable», false);
var emailTable = [
pour (var i = 0; i <emailTable.length; i + = 1)
if (val == emailTable [i])
retour;
ctrl. $ setValidité («e-mailavailable», true);
Retour Val;
})
}
}
})
Ajoutez l'attribut IS-IS-TAY-TAKE à l'élément d'entrée et ajoutez un autre NG-Message:
La copie de code est la suivante:
<p ng-message = "emailavailable"> prend déjà! Essayez d'autres adresses e-mail! </p>