AngularJS validation d'entrée
AngularJS formulaires et des contrôles peuvent valider les entrées de données.
La validation des entrées
Dans les sections précédentes, vous avez appris les connaissances sur AngularJS formulaires et des contrôles.
AngularJS formulaires et des contrôles peuvent offrir des fonctionnalités de validation et des données illégales saisies par l'utilisateur un avertissement.
 | Vérifiez que le client ne peut pas assurer la sécurité de la saisie des données de l'utilisateur, le serveur de validation des données est également nécessaire. |
|---|
Le code d'application
<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Validation Exemple </ h2 >
<Form ng-app = "myApp ng-contrôleur" = "validateCtrl"
name = "myForm" novalidate>
<P> Nom d' utilisateur: <br>
<Input type = "text" name = "user" ng-model = "user" requis>
<Span style = "color: red " ng-show = ".. MyForm.user $ sale && myForm.user $ invalide">
<Span ng-show = "myForm.user . $ Error.required"> nom d' utilisateur est nécessaire. </ Span>
</ Span>
</ P>
<P> E-mail: <br>
<Input type = "email" name = "email" ng-model = "email" nécessaire>
<Span style = "color: red " ng-show = ".. MyForm.email $ sale && myForm.email $ invalide">
<Span ng-show = "myForm.email . $ Error.required"> boîte aux lettres est un must. </ Span>
<Span ng-show = "myForm.email . $ error.email"> boîtes aux lettres illégales. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ sale && myForm.user. $ invalide ||
myForm.email. $ sale && myForm.email. $ non valide »>
</ P>
</ Form>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ portée) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Validation Exemple </ h2 >
<Form ng-app = "myApp ng-contrôleur" = "validateCtrl"
name = "myForm" novalidate>
<P> Nom d' utilisateur: <br>
<Input type = "text" name = "user" ng-model = "user" requis>
<Span style = "color: red " ng-show = ".. MyForm.user $ sale && myForm.user $ invalide">
<Span ng-show = "myForm.user . $ Error.required"> nom d' utilisateur est nécessaire. </ Span>
</ Span>
</ P>
<P> E-mail: <br>
<Input type = "email" name = "email" ng-model = "email" nécessaire>
<Span style = "color: red " ng-show = ".. MyForm.email $ sale && myForm.email $ invalide">
<Span ng-show = "myForm.email . $ Error.required"> boîte aux lettres est un must. </ Span>
<Span ng-show = "myForm.email . $ error.email"> boîtes aux lettres illégales. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ sale && myForm.user. $ invalide ||
myForm.email. $ sale && myForm.email. $ non valide »>
</ P>
</ Form>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ portée) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
Essayez »
| formulaire HTML attributs novalidate pour désactiver la validation par défaut du navigateur. |
|---|
Des exemples d'analyses
AngularJS instruction ng modèle est utilisé pour lier des éléments d'entrée du modèle.
objet modèle possède deux attributs: l' utilisateur et email.
Nous utilisons ng-commande show, couleur: rouge dans le message est seulement $ affichage sale ou $ invalide.
| propriété | description |
|---|---|
| $ sale | Il y a des formulaires à remplir fiche |
| $ valide | Contenu du champ légitime |
| $ Invalid | Contenu du champ sont illégales |
| $ Pristine | Pas de formulaires à remplir fiche |