Detailed explanation of the use of jQuery Validation

jQuery Validation 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                     //    用户名 9                     username: {　　//指的是input中的name10                         required: true,11                         rangelength: [6, 11]12                     },13                     //   密码14                     password: {15                         required: true,16                         rangelength: [11, 12]17                     },18                 },19           20                 messages: {21                     //   用户名22                     username: {23                         required: '此项必填',24                         rangelength: '用户名长度为6-11位'25                     },26                     //   密码27                     password: {28                         required: '此项必填',29                         rangelength: '用户名长度为11-12位'30                     },            
31                 },32                 // 校验全部通过33                 submitHandler: function () {34                     alert("校验全部通过！")35                 },36                37             })38         })39   </script>40 41 42 html:43     <form action="" id="myForm">44     <!--用户名-->45     <p>46         <label for="user">username:</label>47         <input type="text" name="username" id="user"/>48     </p>49     <!--密码-->50     <p>51         <label for="pass">password:</label>52         <input type="text" name="password" id="pass"/>53     </p>54     <!--提交-->55     <p><input type="submit" value="提交"/></p>56 　　</form>

From the above code, let me talk about the use of jQuery Validation.

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

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

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

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

　

　5.When the value of required is true, verifying this item is mandatory.

　

　 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 of the validation element.

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

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

　　

　　11.range() sets the range of the pointer.

12.email() verifies whether the email format is correct.

　13.url() Verify whether the URL format is correct.

　14.date() verifies whether the date format is correct. [Note: does not verify the accuracy of the date, only the format ]

　15.submitHandler When the form is passed Verify and submit the form.

// 校验全部通过                submitHandler: function () {
                    alert("校验全部通过！")
                },

　16.invalidHandler When a form that fails validation is submitted, you can Handle some stuff in that callback function.

 //  校验不通过　　　　　　　　　　　　　　invalidHandler: function () {
                    alert("no")
                },

　17.focusInvalidThe default value is true. When the verification fails, the focus jumps to the first invalid form element.

18.focusCleanupThe default value is true, When the form gets focus, Removes the errorClass on the form and hides all error messages. [Note: Avoid using it with focusInvalid. 】

19. errorElement Use the html element type to create a container for error messages. Default is written in label

　　　

　20.

errorClassSet the style to define errors The style of the message.

　21.

highlight Set the highlight to the form elements that have not passed the verification.

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

The above are what I have come into contact with, and there are many more about

jQuery validation framework

. Those who are interested can check the API of jQuery.validate.js.

The above is the detailed content of Detailed explanation of the use of jQuery Validation. For more information, please follow other related articles on the PHP Chinese website!