ANGULARJS Authentication Information Framework Encapsulation plug-in usage "w5cvalidator extension" _angularjs

This example describes the encapsulation plug-in usage of the ANGULARJS validation information framework. Share to everyone for your reference, specific as follows:

ANGULARJS Form Validation rules

Angular.js form validation rules are required (required), type= "number" (must be numeric), type= "email" (must be email address), Ng-max (maximum), ng-min (minimum), Ng-max-length (maximum length), ng-min-length (minimum length), Ng-pattern (regular validation), and so on, and angular write custom validation rules are simple.

Specific verification details refer to official documentation: HTTP://DOCS.ANGULARJS.ORG/GUIDE/FORMS

Angularjs default validation is real-time, if the input box input value validation by adding class Ng-valid on input, if the validation does not pass will automatically add Class Ng-invalid, the input box entered a value automatically added class Ng-dirty So that the system can simply modify the Ng-invalid ng-valid Ng-dirty three styles to achieve the purpose of the validation hint. However, if a validation failure requires a hint of text, it can only be achieved by writing a template.

Disadvantages of angular.js Verification

1. The hint information is displayed in real time, and sometimes we want to submit the trigger validation through the form.

2. Write validation message needs to write a large number of templates:

<div>
    size (integer 0-10):
    <input type= "number" ng-model= "size" name= "size" min= "
       0" max= "10" Integer/>{{size}}<br/>
    <span ng-show= "form.size. $error. Integer" >this is not valid </span>
    <span ng-show= "form.size $error. Min | | form.size. $error. Max" > The
     value must be in range 0 To 10!</span>
</div>

The presence of W5cvalidator extensions

The source address on the GitHub is: https://github.com/why520crazy/w5c-validator-angular

Current version v1.0.0

Use steps:

1. Referencing W5cvalidator.js in the project

2. Add a directive to the form form w5c-form-validate and W5c-submit are as follows:

<form class= "Form-horizontal cw-form demo-form" role= "form" w5c-submit= "js_save_entity (form_validate)"
         W5c-form-validate= "" Novalidate name= "form_validate" >
<div class= "Form-group" >
<label class= " Col-sm-2 Control-label "> Mailbox </label>
<div class=" col-sm-10 ">
<input type=" email "name=" Email "ng-model=" Entity.email "required=" class= "Form-control" placeholder= "input Mailbox" >
  </div>
</ div>
<div class= "Form-group" >
  <label class= "col-sm-2 Control-label" > Username </label>
<div class= "col-sm-10" >
     <input required= "" ng-pattern= "/^[a-za-z]{1}[0-9a-za-z_]{1,19}$/" Ng-model= "Entity.name" class= "Form-control" name= "user_name" placeholder= "Enter user name" >
  </div>
</ Div> ...
</form>

The W5c-submit function is an event that is executed after a successful form validation, and the validation failure does not execute

3. No, it's easy to use.

W5cvalidator Use precautions:

1. W5cvalidator default error tip using bootstrap style and layout, use to your project need to modify the default Show_error, Remove_error method, can be tip, can be unified in a place to display and so on

2. W5cvalidator can set the cursor to remove input when the error message is displayed, the default false

3. W5cvalidator has its own default prompt and supports custom validation rule prompt information

4. All validation information for angular.js is stored in form forms, and w5cvalidator is also used to monitor the properties of the form elements, using the name attribute that must be set form and each element, otherwise the error message will not find the corresponding element

5. Look at the following code and you'll understand everything:

W5cvalidator.init ({
     //blur_trig  : false,
     //show_error:function (Elem, error_messages) {
     ////
     } ,
     //remove_error:function (elem) {////
     }
});
W5cvalidator.set_rules ({
    user_name: {
       required: "The user name entered cannot be empty", pattern
       : "Username must enter letter, number, underline, start with letter"
    }
});

Of course, the current w5cvalidator is also relatively primitive, ngnice verification is the use of the W5cvalidator

W5cvalidator 2.0 in the future planning

1. Now you can only set the global display type, in the future to support a single form of configuration items, the entire project occasionally have a different message

2. Code refactoring, writing extensions in a angularjs way

3. Add some angularjs no validation types such as repeat, Uniquecheck, etc.

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