Easy-to-use Form Verification plug-in

Easy-to-use Form Verification plug-in
During the project process, a jquery validation form plug-in is used. Some common methods of this powerful form verification plug-in are briefly organized here, as well as some precautions during use. First, we need to introduce jquery and then the jquery validation files. Then, initialize the plug-in through the initialization method, and then you can use it as needed. // Introduce jquery, version 1.6 + <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.1.min.js"> </script> // introduce jquery validation <script type = "text/javascript" src = "http://jqueryvalidation.org/files/dist/jquery.validate.min.js "> </script> The following describes how to use it, he has two ways to use it. The first method is to directly write the verification method on the tag. I personally don't like it very much and feel that it is not separated. I prefer the second method, configure the fields to be verified through JS, and then submit the operation. The plugin provides some common verification methods. Sequence Number rule description 1 required: true required field. 2 remote: "check. php" uses ajax to call check. php to verify the input value. 3 email: true, you must enter an email in the correct format. 4 url: true: Enter the url in the correct format. 5 date: true: the date in the correct format must be entered. Date verification ie6 error, Use with caution. 6 dateISO: true a date (ISO) in the correct format must be entered, for example, 2009-06-23,1998/01/22. Only verify the format, not verify the validity. 7 number: true, a valid number (negative number, decimal number) must be entered ). 8 digits: true must be an integer. 9 creditcard: You must enter a valid credit card number. 10 bytes to: the input value of "# field" must be the same as that of # field. 11 accept: enter a string with a valid suffix (the suffix of the uploaded file ). 12 maxlength: A string with a maximum length of 5 characters ). 13 minlength: 10 string with a minimum length of 10 (one character for Chinese characters ). 14 rangelength: [5, 10] The input length must be a string between 5 and 10 (one Chinese character ). 15 range: [5, 10] The input value must be between 5 and 10. 16 max: the input value of 5 cannot be greater than 5. 17 min: the input value of 10 cannot be less than 10. For a simple example, use the above method: copy the Code <form> Email: <intput type = "text" name = "email"> <input type = "submit" value = "submit"> </form> <script> // The following is a basic construction of Form Verification $ ('from '). validate ({debug: true, // debug mode, only verification without submitting rules: {// All verification rules are written here email: {required: true, // required email: true // email format }}, messages: {// error message for all verification rules is written here email: {required: 'enter your email address ', email: 'enter an email address in the correct format '}}}); </script> copy the code. Of course, some fields may be processed separately when submitted, jquery validation This method is provided for verification. For example, $ ('input [name = email] '). rules ('add', {required: true, email: true}); // you can use $. rules ('delete', {}), the deletion rules above are some of the common verification methods it provides. Of course, in most cases, we have complicated logic in our project, as a result, we cannot use the methods provided above. We need to implement some verification methods by ourselves. However, you don't have to worry that this powerful plug-in also provides a good extension method. Copy code $. validator. addMethod ('e-mail ', function (emailValue, element, param) {var reg =/^ ([a-zA-Z0-9] + [_ |\_|\.]?) * [A-zA-Z0-9] + @ ([a-zA-Z0-9] + [_ | \.]?) * [A-zA-Z0-9] + \. [a-zA-Z] {2, 3} $/; if (reg. test (emailValue) {return true;} return false;}); by default, the copy code plug-in provides the location and content of the error, at the same time, the plug-in provides a way to modify the error container and class: the default value of the parameter type description is errorClass String, which specifies the css class Name of the error prompt. You can customize the style of the error prompt. "Error" errorElement String indicates the label used to mark the error. The default label is label and can be changed to em. "Label" errorContainer Selector shows or hides the verification information. It can automatically display the container attribute when an error message is displayed, and hide it when no error occurs. This is of little use. ErrorContainer: "# messageBox1, # messageBox2" errorLabelContainer Selector stores error messages in a single container. The label used by wrapper String to package the preceding errorELement. In addition, you can also use errorPlacement and success to listen, for example, copy the code // set the default rule $. validator. setDefaults ({errorPlacement: function (errmsg, element) {// errmsg: error message (which can be customized through messages); element error element}, success: function (label, element) {// label: the container that displays the correct information; element: verified elements}); copy the code and the plug-in provides the following useful methods: 1. submitHandler can make some judgment before submission. debug can be used for testing. Only verification is not submitted. ignore ignores elements that do not need to be verified. The value is selector 4. remote can perform asynchronous verification. resetForm reset Form 6. the format can be The parameter in the rule replaces {n} in the template. For more information, see the verification component's official website. Note the timing of select, radio, and checkbox. Here is a tips. When the select Display error cannot be triggered, you can go to errorPlacement, run $ (element ). blur () method. The plug-in also provides some triggering methods for configuration, such as onsubmit, onfocusout, onkeyup, onclick, focusInvalid, and focusCleanup.