Form validation for Angularjs

It is important to be able to give real-time visual feedback based on what the user has entered in the form. The context in which people communicate with others
, the feedback given by the form validation is as important as getting the correct input.

If you want to block the browser's default validation behavior for forms, you can add novalidate tags to the form elements.

<form name= "Form" novalidate>
<label name= "Email" >your email</label>
<input type= "Email"
Name= "Email"
ng-model= "Email" placeholder= "email Address"/>
</form>

Here's a look at all the validation options that you can use on the INPUT element.

1. Required Fields
Verify that a form input is filled in, as long as you add the HTML5 tag to the input field element required:
<input type= "text" required/>
2. Minimum length
Verify that the text entered by the form is longer than a certain minimum value, and use the ANGULARJS directive on the input field ng-minleng=
' {number} ':
<input type= "Text" ng-minlength= "5"/>
3. Maximum length
To verify that the text length entered by the form is less than or equal to a maximum value, use the ANGULARJS directive on the input field
Ng-maxlength= "{Number}":
<input type= "text" ng-maxlength= "/>"

4. Pattern matching
Use ng-pattern= "/pattern/" to ensure that the input matches the specified regular expression:
<input type= "Text" ng-pattern= "[a-za-z]"/>

5. Email
Verify that the input is an e-mail message, as long as you set the type of input to email as follows:
<input type= "Email" name= "email" ng-model= "User.email"/>

6. Digital
Verify that the input is numeric and set the type of input to number:

<input type= "number" name= "Age" ng-model= "User.age"/>

7. URL
Verify that the input is a URL and set the type of input to a URL:
<input type= "url" name= "homepage" ng-model= "User.facebook_url"/>

8. Custom Validation
It is very easy to customize the instructions in Angularjs. In view of the fact that no relevant content of the directive has been introduced, the 10th chapter
Explore how to create custom validations. Now let's look at how to send a request through a back-end server and respond
Result to set the input field to be legal or illegal to ensure that the content in the input field is unique.

Custom directives:

<my-directive></my-directive>

The definition of the mydirective directive looks like this:
Angular.module (' myApp ', [])
. directive (' mydirective ', function () {
return {
Restrict: ' E ',
Template: ' <a href= ' http://google.com ' >
Click me to go to google</a> '
};
});

By using the. Directive () method in the Angularjs module API, we can pass in a string and a function to
Register a new directive. Where the string is the name of the instruction, the instruction name should be the hump naming style, the function should return
An object.

The hump naming style is used to write a phrase in a word, except for the first word.
Uppercase letters with no spaces in the middle. For example, bumpy roads to write in hump style should be
Bumpyroads.
In our example, the My-directive Declaration directive is used in HTML, so the directive definition must
Take mydirective as the name.

The object returned by the directive () method contains the methods and properties that are required to define and configure directives.

By default, Angularjs nested the HTML code generated by the template in custom labels <my-directive> interiors.

Here are some new settings to add to the directive definition: We can remove a custom label from the generated Dom completely,
And only the links generated by the template are left. This effect can be achieved by setting replace to true:
Angular.module (' myApp ', [])
. directive (' mydirective ', function () {
return {
Restrict: ' E ',
Replace:true,
Template: ' <a href= ' http://google.com ' >click me to go to google</a> '
};
});
Looking again at the generated code, you will see that the original instruction declaration in the DOM is gone, only we are in the template
Write the HTML code. Instead of nesting inside, the Replace method replaces the directive declaration with a custom element, 8-5
is shown.

From now on, we call these custom elements created as directives (created with the. Directive () method) because the fact
There is no need to create a new custom element on the declaration directive.

The following are used to declare the legal format of the previously created Directive:
<my-directive></my-directive>
<div my-directive></div>
<div class= "My-directive" ></div>
<!--directive:my-directive-->

In order for Angularjs to invoke our instructions, we need to modify the restrict settings in the instruction definition. This setting tells
V. ANGULARJS the declaration format used to match the instruction definition when compiling HTML. We can specify one or more formats.
For example, a previously created directive can specify the format of an element (E), attribute (A), Class (C), or note (M) to
Invoke directive:

Angular.module (' myApp ', [])
. directive (' mydirective ', function () {
return {
Restrict: ' EAC ',
Replace:true,
Template: ' <a href= ' http://google.com ' >click me to go to google</a> '
};
});

No matter how many ways you can declare an instruction, we persist in using the attribute method because it has better cross-browser compatibility:
<div my-directive></div>
To be more specific about our intentions, set the restrict to the letter A (representing attribute):
Restrict: ' A '

While following this convention, you should also pay attention to the built-in style of each browser in order to decide that the instruction template is embedded in the HTML
Nested within the declaration element, or replace the declaration element.

If you do not mix the URL and the link text inside the directive, you can provide a better experience for others who use our instructions. I
The goal is to focus on the public interface of the directive, just like any other programming language. In fact, the above template should be converted
Can take the form of two variables: One variable is the URL and the other is the link text:
Template: ' <a href= ' {{myurl}} ' >{{myLinkText}}</a> '

In the main HTML document, you can add Myurl and myLinkText two properties to the directive, which will become the directive
Properties of the internal scope:
<div my-directive
My-url= "Http://google.com"
my-link-text= "Click me to Go to Google" >
</div>

Reload the page, notice that the part of the declaration instruction has been replaced by the template, but the href attribute of the link is empty, and the pointer
There is no text in parentheses,

Form validation for Angularjs