AngularJS input verification
AngularJS forms and controls can verify input data.
Enter verification
In the previous chapters, you have learned about AngularJS forms and controls.
AngularJS forms and controls can provide verification capabilities and warn of illegal data entered by users.
Note: Client verification cannot ensure the security of user input data, so data verification on the server is also necessary.
Application Code
<!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>Verification instance</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">The 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 a must. </span><span ng-show="myForm.email.$error.email">Illegal 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>Running results:
Verification example
username:
Mail:
Note: HTML form attribute novalidate is used to disable browser default verification.
Example analysis
The AngularJS ng-model directive is used to bind input elements into the model.
A model object has two properties: user and email.
We used the ng-show directive, color:red is displayed only if the message is $dirty or $invalid.
| property | describe |
|---|---|
| $dirty | There are records for filling out the form |
| $valid | The field content is legal |
| $invalid | The field content is illegal |
| $pristine | No record is filled in the form |
The above is a compilation of AngularJS input verification information. We will continue to supplement it later. I hope it can help students who study.