Angularjs Introductory Tutorials Example of form validation usage _angularjs

This example describes the Angularjs form checksum usage. Share to everyone for your reference, specific as follows:

The verification of form data is of little significance for improving web security, because the server received the request does not necessarily come from our front-end page, it is possible to come from other sites, hackers can make a form of their own, the data submitted to our server (that is, cross-station forgery request), so that bypassing the front page checksum. If you are familiar with the HTTP protocol, you can even manually construct an HTTP request to the server in your program, so server-side data validation is absolutely essential.

The significance of Web front-end data validation is to improve the user experience, and users do not have to wait until the data is submitted to the server before they know what data is illegal.

Using Angularjs to validate form elements is quite handy, so let's take a look at all the checksum options that you can use on the INPUT element.

1. Required Fields

Verify that a form entry is filled in, as long as you add the HTML5 tag required to the input field element:

<input type= "text" required/>

2. Minimum length

Verify that the text length entered in the form is greater than a minimum value and use the ANGULARJS directive ng-minleng= "{number}" on the input field:

<input type= "Text" ng-minlength= "5"/>

3. Maximum length

Verify that the text length entered in the form is less than or equal to a maximum value, using the ANGULARJS directive ng-maxlength= "{number}" on the input field:

<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. E-Mail

Verify that the input is an e-mail message, as long as the type of input is set 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 as a URL:

<input type= "url" name= "homepage" ng-model= "User.facebook_url"/>

Let's take a look at a specific case code:

<! DOCTYPE html>  

Form validation is encapsulated in the Angular-messages.js file as a ngmessages module for ANGULARJS, which we must introduce:

<script type= "Text/javascript" src= "Angular-1.3.0.14/angular-messages.js" >

In addition, tell Angularjs to introduce Ngmessages as an application-dependent module, as follows:

var loginmod = angular.module (' Loginmod ', [' ngmessages ']);

Required specifies that the text box is required, ng-minlength specifies the minimum length, ng-maxlength specifies the maximum length, and the validation is done inside Angularjs, and we only need to define the hint message when the condition is not met:

<div class= "error" ng-messages= "Loginform.uname. $error" style= "color:red;" >
  <div ng-message= "required" > username cannot be empty </div>
  <div ng-message= "minlength" > Username length of at least 3 </div>
  <div ng-message= "maxlength" > Username length cannot exceed 10</div>
</div>

Finally, we look at the effect in the browser:

We can also write the message in a separate errors.html file:

<div ng-message= "required" > username cannot be empty </div>
<div ng-message= "minlength" > Username length is at least 3</div>
<div ng-message= "maxlength" > Username length cannot exceed 10</div>

You then use the Ng-messages-include property in the page to introduce this information:

<div class= "error" ng-messages= "Loginform.uname. $error" style= "color:red;" ng-messages-include= "errors/
   Errors.html ">
</div>

Angularjs Source can click here to download the site .

I hope this article will help you to Angularjs program design.