AngularJS implementation Form Verification _ AngularJS-js tutorial

Client form verification is one of the coolest functions in AngularJS. AngularJS Form Verification allows you to write an interactive and modern HTML5 form from the very beginning. There are many Form Verification commands in AngularJS. Here we will talk about several of the most popular commands, and then we will discuss how to write custom verification. Although I am not a front-end programmer, I understand how important the front-end verification is.

In this way, the backend can breathe more breath, and the frontend can improve the user's happiness compared with the backend.

AngularJS provides a convenient form verification function, which is recorded here.

Start with the following code:

The Code is as follows:

Script
Angular. module ('myapp', [])
. Controller ('validationcontroller', ['$ scope', function ($ scope ){
$ Scope. user = 'kavlez ';
$ Scope. email = 'sweet _ dreams@aliyun.com ';
}]);
Script

Some verification options of the input tag are usually used with the HTML5 tag.

Required

Length

Use command ng-minlength/ng-maxlength

Specific format
For example, set the email, URL, and number type to the corresponding type, for example:

The Code is as follows:

Pattern Matching

Use the command ng-pattern, for example:

The Code is as follows:

Form attributes can be used to operate the form more easily.

Pristine/dirty
Indicates whether it has been modified, for example

The Code is as follows:

Access using formName. fieldName. $ pristine. The input must have an ng-model declaration.

The Code is as follows:

Valid/invalid

Indicates whether the verification is successful.

The Code is as follows:

$ Error

Form Verification information. If the verification fails, the corresponding information is returned.

AngularJS provides css class for the form status.

The Code is as follows:

. Ng-pristine
. Ng-dirty
. Ng-valid
. Ng-invalid

For example, to make the verification pass green, the failure is Red:

The Code is as follows:

Input. ng-valid {
Color: green;
}
Input. ng-invalid {
Color: green;
}

In the example given, the code is written as much as an email verification. If a few fields are added, several different prompts are added, and several events are added, the code will become messy.

In fact, this is not recommended. We have a better method.
Is to use angular-messages.js

First, do not forget the two steps

The Code is as follows: