Validation des entrées AngularJS

Les formulaires et contrôles AngularJS peuvent valider les données saisies.

Validation des entrées

Dans les chapitres précédents, vous avez découvert les formulaires et les contrôles AngularJS.

Les formulaires et contrôles AngularJS peuvent fournir des fonctions de validation et avertir les utilisateurs des données illégales saisies.

	客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

Code d'application

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<h2>验证实例</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>

Exécuter Exemple»

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

	HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

Exemple d'analyse

AngularJS ng-model La directive est utilisée pour lier les éléments d'entrée au modèle. L'objet modèle

a deux propriétés : user et email.

Nous utilisons la commande ng-show, color:red ne sera affiché que lorsque l'e-mail est $dirty ou $invalid.

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

Validation des entrées AngularJS