Latest web development tutorials

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.

Note 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 = 'john.doe@gmail.com';
});
</ Script>

</ Body>
</ Html>

try it"

Note 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