This article describes the usage of the package plug-in for the AngularJS verification information framework. Share it for your reference, as follows:
AngularJS form validation rules
The form verification rules include required (required), type="number" (must be a number), type="email" (must be an email address), ng-max (maximum value), ng-min (minimum value), ng-max-length (maximum length), ng-min-length (minimum length), ng-pattern (regular verification), etc., and it is also very simple to write custom verification rules in angular.
For specific verification details, please refer to the official document: /guide/forms
AngularJS default verification is real-time. If the input value is validated by the input box, class ng-valid will be added to the input. If the verification is not passed, class ng-invalid will be automatically added. After entering the value in the input box, class ng-dirty will be automatically added. In this way, the system can easily achieve the purpose of verification prompts by modifying the three styles of ng-invalid ng-valid ng-dirty. However, if verification fails and requires a prompt for a paragraph of text, it can only be achieved by writing a template.
Disadvantages of verification
1. The prompt information is displayed in real time. Sometimes we want to trigger verification through form submission.
2. To write verification prompt information, you need 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=".$">This is not valid integer！</span>
<span ng-show=".$ || .$">
The value must be in range 0 to 10!</span>
</div>
The emergence of w5cValidator extension plug-in
The source code address on Github is: /why520crazy/w5c-validator-angular
Current version v1.0.0
Steps to use:
1. Quote in the project
2. Add a directive w5c-form-validate and w5c-submit on the form form 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">Mail</label>
<div class="col-sm-10">
<input type="email" name="email" ng-model="" required="" class="form-control" placeholder="Enter email">
</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="" class="form-control" name="user_name" placeholder="Enter a username">
</div>
</div>
...
</form>
w5c-submit function is an event executed after the form verification is successful, and will not be executed if the verification fails.
3. It's gone, it's that simple to use
Notes on using w5cValidator:
1. The default error prompt of w5cValidator uses the style and layout of bootstrap. When using it, you need to modify the default show_error, remove_error methods. It can be a tip prompt, it can be displayed in a certain place, etc.
2. w5cValidator can set whether an error message is displayed when the cursor is removed, and the default is false
3. w5cValidator comes with default prompt information, and supports custom verification rule prompt information.
4. All verification information is saved in the form form. w5cValidator is also implemented by monitoring the properties of form elements. You must set the form and the name attributes of each element, otherwise the error message will not be found.
5. You will understand everything by looking at the following code:
({
//blur_trig : false,
//show_error : function (elem, error_messages) {
//
//},
//remove_error: function (elem) {
//
//}
});
w5cValidator.set_rules({
user_name: {
required: "The username entered cannot be empty",
pattern : "The username must enter letters, numbers, and underscores, starting with letters"
}
});
Of course, the current w5cValidator is still relatively primitive. NgNice's verification prompt is to use w5cValidator
Future planning w5cValidator 2.0
1. Now you can only set the global display type. In the future, you will need to support configuration items for a single form. There will be occasional prompt information for the entire project.
2. Code refactoring, writing extensions in AngularJS mode
3. Add some verification types that AngularJS does not have, such as repeat, uniquecheck, etc.
I hope this article will be helpful to everyone's AngularJS programming.