JQuery Validate plug-in, jqueryvalidate

JQuery Validate plug-in, jqueryvalidate
JQuery Validate

The jQuery Validate plug-in provides powerful form verification functions to simplify form verification on the client side. It also provides a large number of custom options to meet various application needs.

 

1. First, if we do not have jquery. validata. js, We need to download it. Click the godsend download link.

 

2. Create a runtime environment, that is, introduce the required plug-ins.

<Script src = "jquery-1.9.1.js" type = "text/javascript" charset = "UTF-8"> </script>
<Script src = "jquery. validate. min. js" type = "text/javascript" charset = "UTF-8"> </script>

 

3. write HTML content and create a form

<Form id = "demoForm"> <p> <label for = "user"> username: </label> <input type = "text" name = "username" id = "user"/> </p> <label for = "pass"> password: </label> <input type = "password" name = "password" id = "pass"/> </p> <label for = "age"> & nbsp; & nbsp; age: </label> <input type = "text" name = "age" id = "age"/> </p> <label for = "post"> postcode: </label> <input type = "text" name = "PostCode" id = "post"/> </p> <input type = "submit" value = "submit" id = "btn"/> </form>

The effect is as follows:

 

4. Edit js Code

<Script type = "text/javascript"> $ (function () {// form used to bind the required operation $ ('# demoForm '). validate ({rules: {// return the element verification rule // bind the element name value username: {required: true, // set it to the required option rangelength: [3, 6] // minimum length and maximum length}, password: {// name value of the bound element required: true, // set as required option rangelength: [6, 12] // minimum length and maximum length}, age: {// name value of the bound element // min: 18, // minimum // max: 999, // maximum range: [18,999], // minimum and maximum values rangelength: [], // minimum length and maximum length digits: true // positive integer}, PostCode: {// The name value of the binding element required: true, // set to the required option PostCode: true // custom verification }}, // message: {username: {// The name value of the binding element required: 'This entry is required '. // the error message rangelength is prompted: 'username length is 3-6 bits '// error message}, password: {// name value of the binding element required: 'This item is required ', // error message rangelength: 'username is 6-12 bits '// error message}, age: {// name value range of the bound element: 'Age must be between 18--999', // error message rangelength: '1 ~ 3-digit ', // error message displayed: 'Age must be a positive integer' // error message}, PostCode: {// name value of the bound element required: 'This entry is required' // error message}, // submitHandler: function () {alert ("verify all passed") when the form passes verification ")}, // The operation invalidHandler: function () {alert ("no") ;}}) That is executed when a verified form is submitted; // customize a Form Verification $. validator. addMethod ('postcode', function (value) {var reg =/^ [0-9] {6} $/; return reg. test (value) ;}, 'must be in ZIP format')}) </script>

 

As follows:

 

Well, this is the step to use jQuery Validate. The Code also has some simple verification attributes.

If you need to know it carefully, stamp me! Stamp me!