AngularJS input validation
AngularJS forms and controls can validate data inputs.
Input validation
In the previous sections, you have learned the knowledge about AngularJS forms and controls.
AngularJS forms and controls can offer validation features and illegal data entered by the user a warning.
 | Verify that the client can not ensure the security of user data entry, data validation server is also necessary. |
|---|
Application code
<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<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 necessary. </ Span>
</ Span>
</ P>
<P> E-mail: <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"> mailbox is a must. </ Span>
<Span ng-show = "myForm.email . $ Error.email"> illegal mailboxes. </ 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>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<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 necessary. </ Span>
</ Span>
</ P>
<P> E-mail: <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"> mailbox is a must. </ Span>
<Span ng-show = "myForm.email . $ Error.email"> illegal mailboxes. </ 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>
try it"
| HTML form attributes novalidate for disabling the browser's default validation. |
|---|
Examples of analytical
AngularJS ng-model instruction is used to bind input elements to the model.
Model object has two attributes: user and email.
We use ng-show command, color: red in the message is only $ dirty or $ invalid display.
| Attributes | description |
|---|---|
| $ Dirty | There are forms to fill record |
| $ Valid | Field contents legitimate |
| $ Invalid | Field contents are illegal |
| $ Pristine | No forms to fill record |