English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
AngularJS forms and controls can validate input data.
In the previous few chapters, you have learned about AngularJS forms and controls.
AngularJS forms and controls can provide validation functionality and warn users of invalid input data.
Client-side validation cannot ensure the safety of user input data, so server-side data validation is also necessary.
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<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">Username is required.</span>
</span>
</p>
<p>Email:<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">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</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 = '[email protected]';
});
</script>
</body>
</html>Test and see ‹/›The HTML form attribute novalidate is used to disable the browser's default validation.
AngularJS ng-model Directive is used to bind input elements to the model.
The model object has two properties: user and email.
We used ng-showDirective, color:red in the email $dirty Or $invalid It will be displayed only when both are true.
| Attribute | Description |
|---|---|
| $dirty | Form has fill records |
| $valid | Field content is valid |
| $invalid | Field content is illegal |
| $pristine | No form fill records |