Vérification de l'entrée AngularJS
Les formulaires et les contrôles AngularJS peuvent vérifier les données d'entrée.
Entrez la vérification
Dans les chapitres précédents, vous avez appris les formes et les contrôles angularjs.
Les formulaires et contrôles AngularJS peuvent fournir des capacités de vérification et avertir des données illégales saisies par les utilisateurs.
Remarque: la vérification du client ne peut pas garantir la sécurité des données d'entrée de l'utilisateur, donc la vérification des données sur le serveur est également nécessaire.
Code de demande
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </dcript> </-head> <body> <h2> Verification Instance </h2> ng-controlller = "validatectrl" name = "myform" novalidate> <p> nom d'utilisateur: <br> <entrée type = "text" name = "user" ng-model = "user" requis> <span style = "color: red" ng-show = "myform.user. $ sale && myform.user. $ invalid"> <panp ng-show = "myform.user. Le nom d'utilisateur est requis. </span> </span> </p> <p> e-mail: <br> <entrée type = "email" name = "e-mail" ng-model = "e-mail" requis> <span style = "colori: red" ng-show = "myform.email. $ sale && myform.email. $ invalid"> <span ng-show = "myform.email. $ error.required"> e-mail est un must. </span> <span ng-show = "myform.email. $ error.email"> adresse e-mail illégale. </span> </span> </p> <p> <input type = "soumider" ng-disabled = "myform.user. $ sale && myform.user. $ invalid || myform.email. $ sale && myform.email. $ invalid"> </p> </ form> <script> var app = angular.Module ('myApp', []); app. fonction ($ scope) {$ scope.user = 'John Doe'; $ scope.email = '[email protected]';}); </cript> </ body> </html>Résultats en cours:
Exemple de vérification
nom d'utilisateur:
Mail:
Remarque: l'attribut de formulaire HTML Novalidate est utilisé pour désactiver la vérification par défaut du navigateur.
Exemple d'analyse
La directive AngularJS NG-Model est utilisée pour lier les éléments d'entrée dans le modèle.
Un objet modèle a deux propriétés: l'utilisateur et l'e-mail.
Nous avons utilisé la directive NG-show, Color: Red s'affiche uniquement si le message est $ sale ou $ invalide.
| propriété | décrire |
|---|---|
| $ sale | Il y a des enregistrements pour remplir le formulaire |
| $ valide | Le contenu sur le terrain est légal |
| $ invalide | Le contenu sur le terrain est illégal |
| $ vierge | Aucun enregistrement n'est rempli dans le formulaire |
Ce qui précède est une compilation des informations de vérification des entrées AngularJS. Nous continuerons à le compléter plus tard. J'espère que cela peut aider les étudiants qui étudient.