AngularJS implements form validation_AngularJS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

AngularJS implements form validation_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:17 PM

angularjs form validation

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 of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7469

CakePHP Tutorial

1376

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to use CodeIgniter4 framework in php? May 31, 2023 pm 02:51 PM

PHP is a very popular programming language, and CodeIgniter4 is a commonly used PHP framework. When developing web applications, using frameworks is very helpful. It can speed up the development process, improve code quality, and reduce maintenance costs. This article will introduce how to use the CodeIgniter4 framework. Installing the CodeIgniter4 framework The CodeIgniter4 framework can be downloaded from the official website (https://codeigniter.com/). Down

How to use Flask-WTF to implement form validation Aug 03, 2023 pm 06:53 PM

How to use Flask-WTF to implement form validation Flask-WTF is a Flask extension for handling web form validation. It provides a concise and flexible way to validate user-submitted data. This article will show you how to use the Flask-WTF extension to implement form validation. Install Flask-WTF To use Flask-WTF, you first need to install it. You can use the pip command to install: pipinstallFlask-WTF import the required modules in F

Laravel Development: How to validate form requests using Laravel Validation? Jun 13, 2023 pm 01:34 PM

Laravel is a popular PHP web development framework that provides many convenient features to speed up the work of developers. Among them, LaravelValidation is a very practical function that can help us easily validate form requests and user-entered data. This article will introduce how to use LaravelValidation to validate form requests. What is LaravelValidationLaravelValidation is La

How to handle form validation using middleware in Laravel Nov 02, 2023 pm 03:57 PM

How to use middleware to handle form validation in Laravel, specific code examples are required Introduction: Form validation is a very common task in Laravel. In order to ensure the validity and security of the data entered by users, we usually verify the data submitted in the form. Laravel provides a convenient form validation function and also supports the use of middleware to handle form validation. This article will introduce in detail how to use middleware to handle form validation in Laravel and provide specific code examples.

How to implement form validation for web applications using Golang Jun 24, 2023 am 09:08 AM

Form validation is a very important link in web application development. It can check the validity of the data before submitting the form data to avoid security vulnerabilities and data errors in the application. Form validation for web applications can be easily implemented using Golang. This article will introduce how to use Golang to implement form validation for web applications. 1. Basic elements of form validation Before introducing how to implement form validation, we need to know what the basic elements of form validation are. Form elements: form elements are

Form validation and filtering methods in PHP? Jun 29, 2023 pm 10:04 PM

PHP is a scripting language widely used in web development, and its form validation and filtering are very important parts. When the user submits the form, the data entered by the user needs to be verified and filtered to ensure the security and validity of the data. This article will introduce methods and techniques on how to perform form validation and filtering in PHP. 1. Form validation Form validation refers to checking the data entered by the user to ensure that the data complies with specific rules and requirements. Common form verification includes verification of required fields, email format, and mobile phone number format.

PHP form validation tips: How to use the filter_input function to verify user input Aug 01, 2023 am 08:51 AM

PHP form validation tips: How to use the filter_input function to verify user input Introduction: When developing web applications, forms are an important tool for interacting with users. Correctly validating user input is one of the key steps to ensure data integrity and security. PHP provides the filter_input function, which can easily verify and filter user input. This article will introduce how to use the filter_input function to verify user input and provide relevant code examples. one,

The latest 5 angularjs tutorials in 2022, from entry to mastery Jun 15, 2017 pm 05:50 PM

Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".

See all articles