JQuery MINIUI Development Series: Data validation

In the development of the application system interface, often need to do a lot of complex data validation, when the data entered in accordance with the provisions can be submitted to save.
JQuery MINIUI provides a perfect way to verify and display the form data incorrectly.

A common form control that has a validation event "validation".
By listening to handle the "validation" event, we can customize the validation rule logic, verify the pass, verify the error description, and so on.

1. Monitoring handles "validation" events
   
2. Textbox1.on ("Validation", function (e) {
   
3. if (e.isvalid) {
   
4. if (Isemail (e.value) = = False) {
   
5. E.errortext = "Email address must be entered";
   
6. E.isvalid = false;
   
7. }
   
8. }
   
9. });
   
10. To verify
    
11. Textbox1.validate ();

Copy Code

Suppose there are 20 controls in a form that need to be validated, is it necessary to call 20 validation methods?
JQuery MINIUI offers this scenario by using the Mini.form component to batch validate multiple controls.

1. var form = new Mini. Form ("#form1");
   
2. Form.validate ();
   
3. if (form.isvalid () = = False) {
   
4. Alert ("failure");
   
5. } else {
   
6. Alert ("Success");
   
7. }

Copy Code

Developers just need to get an outermost div and create it as "mini." Form "component, you can call the" form.validate () "Method for batch validation, saving a lot of unnecessary code.

After the above simple processing, the data validation work is done, so how does the validation hint effect? As shown below:

Note: You do not need to calculate the overall width for the error icon placeholder.
For example a textbox normal display is 150px, when the validation error display, the width of the textbox will automatically shorten about 25px, error icon will occupy the 25px display.

The above describes the most basic and most commonly used data authentication methods of MINIUI.
MINIUI can also customize the way the error is displayed, such as prompting for incorrect content, pop-up prompts, and so on.

Reference Example:
Data validation: http://miniui.com/demo/form/validation.html
Centralized display: http://miniui.com/demo/form/validGroup.html
Pop-up Display: http://miniui.com/demo/form/validWindow.html

An attachment is an example of a form validation:

Download attachment address: http://miniui.com/bbs/forum.php?mod=viewthread&tid=17&extra=page%3D1

JQuery MINIUI Development Series: Data validation