Home >Web Front-end >JS Tutorial >AngularJS implements form validation_AngularJS

AngularJS implements form validation_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 16:17:481049browse

Although I am not a front-end programmer, I understand how important it is to do verification on the front-end.

Because this way the backend can take a breather, and compared to the backend, the frontend can actually improve the user's happiness.

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

First start with the following code

Copy code The code is as follows:

Some validation options for input tags, usually used in conjunction with HTML5 tags.

Required

Length

Use the command ng-minlength/ng-maxlength

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

Copy code The code is as follows:

Pattern matching

Use directive ng-pattern, for example:

Copy code The code is as follows:

Form properties that make it easier to operate on the form

pristine/dirty

Indicates whether it has been modified, such as

Copy code The code is as follows:

Accessed in formName.fieldName.$pristine mode, input must have ng-model declaration.

Copy code The code is as follows:

valid/invalid

indicates whether the verification is passed.

Copy code The code is as follows:

$error

Form verification information, corresponding information will be returned when verification fails.

AngularJS provides corresponding css class for form status

Copy code The code is as follows:

.ng-pristine

.ng-dirty

.ng-valid

.ng-invalid

For example, make verification pass green and failure red:

Copy code The code is as follows:

input.ng-valid {

Color: green;

}

input.ng-invalid {

Color: green;

}

In the example given, only one email verification is written. If you add several fields, several different prompts, and several events, the code will become messy.

This is actually not recommended, we have a better way.
Just use angular-messages.js

First of all, don’t forget these two steps

Copy code The code is as follows:

angular.module('myApp', ['ngMessages'])

Okay, first replace those duplicates with ng-messages and ng-message. The above example becomes:

Copy code The code is as follows:

Email:
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />

Email is required.

Invalid email address.

min length 10

max length 50

There is no change in functionality, just that all the duplicate codes have been removed.

Pay attention to distinguishing between ng-messasges and ng-message. Does it feel a bit like with()? The following ng-messages-multiple is used here to make multiple prompts appear at the same time.

But this is still not good enough. Even if the content in ng-message is omitted, there will still be duplication when required verification exists in multiple fields.

Moreover, if the forms on different pages all involve the same content, there will be more and more repeated verification prompts.
To solve this problem, we can use the ng-messages-include directive.
This directive is used to reference a template. For example, the above example becomes:

Copy code The code is as follows:

Email:
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />

It’s not complicated, let’s add a few more things.
In order to make the prompt more friendly(?), let's try to achieve the effect of prompt appearing after the cursor leaves.
At this time, it will be much more convenient to use directives. Here we will first touch on some content related to directives.

Let’s run it first:

Copy code The code is as follows:

var myApp = angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
          $scope.user = 'Kavlez';
$scope.email = 'sweet_dreams@aliyun.com';
}])
.directive('hintOnBlur', [function() {
         return {
             require: 'ngModel',
              link: function(scope, element, attrs, ctrl) {
ctrl.focused = false;
                      element.bind('focus', function(evt) {
scope.$apply(function() {ctrl.focused = true;});
                    }).bind('blur', function(evt) {
scope.$apply(function() {ctrl.focused = false;});
                });
            }
}
}]);

Here we use focused to determine whether the cursor is on a certain attribute. When the focus or blur event occurs on the object using the hintOnBlur directive, the focused state changes.

The form will also be changed accordingly. The usage method is as follows:

Copy code The code is as follows:

Add the judgment of focused to ng-show, and a prompt will appear when it is false.

It looks like that now.

Customize the verification method and validity, which also uses directives.
Verify whether the filled in email address is already occupied. Here is a simple simulation:

Copy code The code is as follows:

.directive('isAlreadyTaken', function() {
    return {
        require: 'ngModel',
        link: function(scope, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                for (var i=0;i                     if(val==emailTable[i])
                        return;
                ctrl.$setValidity('emailAvailable', true);
                return val;
            })
        }
    }
})

Input元素中加上is-already-taken属性，并且再加一个ng-message:

复制代码代码如下:

Already taken! try other email addresses!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js method to determine which mouse left, middle or right button was clicked_javascript skillsNext article：js method to determine which mouse left, middle or right button was clicked_javascript skills

See more

AngularJS implements form validation_AngularJS

Related articles