AngularJS implements Form Verification and angularjs implements forms

AngularJS implements Form Verification and angularjs implements forms

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:

Copy codeThe Code is as follows:
<Form ng-app = "myApp" ng-controller = "validationController" name = "mainForm" novalidate>
<P> Email:
<Input type = "email" name = "email" ng-model = "email" required>
<Span style = "color: red" ng-show = "mainForm. email. $ dirty & mainForm. email. $ invalid">
<Span ng-show = "mainForm. email. $ error. required"> Email is required. </span>
<Span ng-show = "mainForm. email. $ error. email"> Invalid email address. </span>
</Span>
</P>
<P>
<Input type = "submit" ng-disabled = "mainForm. $ invalid">
</P>
</Form>
<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

<Input type = "text" required/>
Length

Use command ng-minlength/ng-maxlength

<Input type = "text" ng-minlength = "5"/>
Specific format
For example, set the email, URL, and number type to the corresponding type, for example:

Copy codeThe Code is as follows:
<Input type = "email" name = "email" ng-model = "user. email"/>
<Input type = "number" name = "age" ng-model = "user. age"/>
<Input type = "url" name = "homepage" ng-model = "user. facebook_url"/>

Pattern Matching

Use the command ng-pattern, for example:

Copy codeThe Code is as follows:
<Input type = "text" ng-pattern = "[a-z]"/>

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

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

Copy codeThe Code is as follows:
<Form name = "mainForm" ng-controller = "orderController">
<Input type = "email" name = "userEmail" ng-model = "myEmail"/>
{MainForm. userEmail. $ pristine }}
{MainForm. userEmail. $ dirty }}
</Form>

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

Copy codeThe Code is as follows:
Valid/invalid

Indicates whether the verification is successful.

Copy codeThe 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.

Copy codeThe Code is as follows:
. Ng-pristine
. Ng-dirty
. Ng-valid
. Ng-invalid

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

Copy codeThe 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

Copy codeThe Code is as follows:
<Script src = "angular-messages.js"> </script>
Angular. module ('myapp', ['ngmessages '])

Well, replace those duplicate items with ng-messages and ng-message. The example above becomes:

Copy codeThe Code is as follows:
<Form ng-controller = "validationController" name = "mainForm">
<P> Email:
<Input
Type = "email" name = "email" ng-model = "myEmail" ng-minlength = "3" ng-maxlength = "50" required/>
<Div style = "color: red" ng-messages = "mainForm. email. $ error" ng-messages-multiple>
<P class = "error" ng-message = "required"> Email is required. </p>
<P class = "error" ng-message = "email"> Invalid email address. </p>
<P class = "error" ng-message = "minlength"> min length 10 </p>
<P class = "error" ng-message = "maxlength"> max length 50 </p>
</Div>
</P>
<P>
<Input type = "submit" ng-disabled = "mainForm. $ invalid"/>
</P>
</Form>

The function has not changed, but all repeated code is removed.
Note that ng-messasges and ng-message are differentiated. Does it feel a bit like ()? Ng-messages-multiple, which is used to make multiple prompts appear at the same time.

However, this is still not good enough. Even if the content in ng-message is saved, there will still be duplicates when required verification exists in multiple fields.
In addition, there will be more and more Duplicate verification prompts when forms on different pages involve the same content.
To solve this problem, we can use the ng-messages-include command.
This command is used to reference the template. For example, the preceding example changes:

Copy codeThe Code is as follows:
<Form ng-controller = "validationController" name = "mainForm">
<P> Email:
<Input
Type = "email" name = "email" ng-model = "myEmail" ng-minlength = "3" ng-maxlength = "50" required/>
<Div style = "color: red" ng-messages = "mainForm. email. $ error" ng-messages-multiple ng-messages-include = "validateTemplate/email.html">
</Div>
</P>
<P>
<Input type = "submit" ng-disabled = "mainForm. $ invalid"/>
</P>
</Form>

It's not complicated. Let's add more things.
To make the prompt more friendly (?) Some, we try to achieve the effect of prompting after the cursor leaves.
At this time, it will be much more convenient to use the directive. Here we will first introduce a bit of instruction-related content.

Run it first and then:

Copy codeThe 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 ('focal ', 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 in a certain attribute. When a focus or blur event occurs on the object using the hintOnBlur command, the status of the focused event changes.

The form is changed as follows:

Copy codeThe Code is as follows:
<Form ng-controller = "validationController" name = "mainForm">
<P> Email:
<Input type = "email" name = "email" ng-model = "myEmail" ng-minlength = "3" ng-maxlength = "50" required hint-on-blur/>
<Div style = "color: red" ng-messages = "mainForm. email. $ error" ng-show = "! MainForm. email. focused "ng-messages-multiple ng-messages-include =" validateTemplate/email.html ">
</Div>
</P>
<P>
<Input type = "submit" ng-disabled = "mainForm. $ invalid"/>
</P>
</Form>

Add the focused judgment to ng-show. If it is false, a prompt is displayed.

Now it looks like that.
Custom authentication method and validity (validity), which also uses the directive (directive ).
Verify whether the entered email address is in use. Here we will simulate it:

Copy codeThe 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 <emailTable. length; I + = 1)
If (val = emailTable [I])
Return;
Ctrl. $ setValidity ('emailavailable', true );
Return val;
})
}
}
})

Add the is-already-taken attribute to the Input element, and add an ng-message:

Copy codeThe Code is as follows:
<P class = "error" ng-message = "emailAvailable"> Already taken! Try other email addresses! </P>