AngularJS input validation


AngularJS forms and controls can validate entered data.

Input Validation

In the previous chapters, you have learned about AngularJS forms and controls.

AngularJS forms and controls can provide validation functions and warn users of illegal data entered.


Note Client-side verification cannot ensure the security of user input data, so server-side data verification cannot necessary.

Application Code

Example

<!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>

Running Example»

Click the "Run Example" button to view the online example


##HTML form attributes
Note novalidate is used to disable the browser's default validation.
Example analysis

AngularJS

ng-model directive is used to bind input elements to the model.

The model object has two attributes:

user and email.

We used the

ng-show command, color:red is only displayed when the email is $dirty or $invalid.

AttributeDescription$dirtyThe form has a filled record$validThe field content is legal$invalidThe field content is illegal$pristineThe form has no records filled in
←
→