JQuery. validate form verification, validateform reset Verification

JQuery. validate form verification, validateform reset Verification

JQuery verification framework:

Basic html code:

1 <script src = "js/jquery-1.9.1.js"> </script> 2 <script src = "js/jquery. validate. min. js "> </script> 3 <script> 4 $ (function () {5 $ ('# myForm '). validate ({6 7 rules: {8 // username 9 username: {// indicates name10 required: true, 11 rangelength: [6, 11] 12} in input }, 13 // password 14 password: {15 required: true, 16 rangelength: [11, 12] 17}, 18}, 19 20 messages: {21 // username 22 username: {23 required: 'This entry is required ', 24 rangelength :' Username length: 6-11 characters '25}, 26 // password 27 password: {28 required: 'This item is required ', 29 rangelength: 'username length: 11-12 characters '30 }, 31}, 32 // check all pass 33 submitHandler: function () {34 alert ("check all pass! ") 35}, 36 37}) 38}) 39 </script> 40 4142 html:43 <form action = "" id = "myForm"> 44 <! -- Username --> 45 <p> 46 <label for = "user"> username: </label> 47 <input type = "text" name = "username" id = "user"/> 48 </p> 49 <! -- Password --> 50 <p> 51 <label for = "pass"> password: </label> 52 <input type = "text" name = "password" id = "pass"/> 53 </p> 54 <! -- Submit --> 55 <p> <input type = "submit" value = "submit"/> </p> 56 </form>

 

From the above code, I will talk about the use of jQuery Validation.

1. validate (options) is the start of running form. It is used to verify the form you selected. The fifth line of the above Code "# myForm" is the id name of form.

 

2. rules () is the validation rule. It is the options in validate, is a user-defined key/value pair rule ===key is the name attribute of a form element, the value is a simple string or an object consisting of Rule/parameter pairs.

 

3. messages () is a user-defined key/value pair message === key. It is the name attribute of a form element and its value is the message to be displayed by the form element.

 

4. username and password in rules () are the name values in input.

　　

5. If the value of required is true, it is required.

　　

6. minlength (length) sets the minimum length of the verification element.

　　

7. maxlength (length) sets the maximum length of the verification element.

 

8. rangelength (range) sets a length range for the verification element.

 

9. max (value) sets the maximum value of the verification element.

 

10. min (value) sets the minimum value of the verification element.

　　　

11. range () indicates the range.

 

12. Verify that the email address format is correct by email.

 

13. Verify that the url format is correct.

 

14. date () Verify that the date format is correct. [Note:Do not verify the accuracy of the date, only verify the format]

 

15. submitHandler submit the form when the form passes verification.

// Verify all pass submitHandler: function () {alert ("verify all pass! ")},

 

 

16. When an unverified form is submitted, invalidHandler can process some tasks in the callback function.

// Verification Failed invalidHandler: function () {alert ("no ")},

 

17. The default value of focusInvalid is true. If the verification fails, the focus will jump to the first invalid form element.

 

18. The default value of focusCleanup is true. When the form gets focus, remove the errorClass on the form and hide all error messages. 【Note: Do not use it with focusInvalid.]

 

19. errorElement: Create an error message container using the html element type. Written in label by default

　　　　

20. errorClass sets the style to define the style of the error message.

 

21. highlight highlights unverified form elements.

highlight: function (element, errorClass) {                  $(element).addClass(errorClass);                   $(element).fadeOut.fadeIn();                }

These are my contacts.JQuery verification frameworkThere are many more. If you are interested, check the API of jQuery. validate. js.