Detailed description of the jQuery validation plug-in Validate, jqueryvalidate

Detailed description of the jQuery validation plug-in Validate, jqueryvalidate

The most common use of JavaScript is form verification. jQuery, as an excellent JavaScript library, also provides an excellent form verification plug-in-Validation. Validation is one of the oldest jQuery plug-ins. It has been verified by different projects around the world and has been well received by many Web developers. As a standard Validation repository, Validation has the following features:

1. built-in verification rules: there are 19 built-in verification rules, including mandatory, number, Email, URL, and credit card number.
2. Custom verification rules: You can easily customize verification rules.
3. Simple and powerful verification information prompt: The verification information prompt is displayed by default, and you can customize to overwrite the default prompt information.
4. Real-time verification: verification may be triggered by keyup or blur events, not just when the form is submitted.

Validate. js: http://plugins.jquery.com/project/validate
Metadata. js: http://plugins.jquery.com/project/metadata
Usage:
1. Introduce the jQuery library and Validation plug-in

Copy codeThe Code is as follows:
<Script src = "scripts/jquery-1.6.4.js" type = "text/javascript"> </script>
<Script src = "scripts/jquery. validate. js" type = "text/javascript"> </script>

2. determine the form to be verified

Copy codeThe Code is as follows:
<Script type = "text/javascript">
//// <! [CDATA [
$ (Document). ready (function (){
$ ("# CommentForm"). validate ();
});
//]>
</Script>

3. Verify the encoding rules for different fields and set the corresponding attributes of the fields.

Copy codeThe Code is as follows:
Class = "required" required
Class = "required email" must be filled in and the content complies with the Email format Verification
Class = "url" compliant with URL format Verification
Minlength = "2" minimum length is 2
There are 19 verifiable rules:
[Javascript] view plaincopyprint?
Required: required field
Remote: "Please correct this field ",
Email: email Verification
Url: url Verification
Date: date Verification
DateISO: Date (ISO) Verification
DateDE:
Number: digit Verification
NumberDE:
Digits: Only integers can be entered.
Creditcard: Credit card number verification
Failed to: "Please enter the same value again" for verification
Accept: String verification with a valid suffix
Maxlength/minlength: Maximum/minimum length Verification
Rangelength: String Length range Verification
Range: digit range Verification
Max/min: Maximum/minimum value verification

Js to be introduced

Copy codeThe Code is as follows:
<Script type = "text/javascript" src = ".../scripts/jquery-1.3.1.js"> </script>
<Script type = "text/javascript" src = "lib/jquery. validate. js"> </script>

Initialized HTML

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# CommentForm"). validate ()
})
</Script>
<Form class = "cmxform" id = "commentForm" method = "get" action = "">
<Fieldset>
<Legend> A simple comment example with verification prompt for validate verification </legend>
<P>
<Label for = "cusername"> name </label>
<Em> * </em> <input id = "cusername" name = "username" size = "25" class = "required" minlength = "2"/>
</P>
<P>
<Label for = "cemail"> email </label>
<Em> * </em> <input id = "cemail" name = "email" size = "25" class = "required email"/>
</P>
<P>
<Label for = "curl"> URL </label>
<Em> </em> <input id = "curl" name = "url" size = "25" class = "url"/>
</P>
<P>
<Label for = "ccomment"> your comment </label>
<Em> * </em> <textarea id = "ccomment" name = "comment" cols = "22" class = "required"> </textarea>
</P>
<P>
<Input class = "submit" type = "submit" value = "submit"/>
</P>

First, check the default specifications.

Serial number	Rules	Description
1	Required: true	Required Fields.
2	Remote: "check. php"	Use the ajax method to call check. php to verify the input value.
3	Email: true	You must enter an email in the correct format.
4	Url: true	You must enter a URL in the correct format.
5	Date: true	You must enter a date in the correct format. Date verification ie6 error, Use with caution.
6	DateISO: true	You must enter a date (ISO) in the correct format, for example, 2009-06-23,1998/01/22. Only verify the format, not verify the validity.
7	Number: true	You must enter a valid number (negative number, decimal number ).
8	Digits: true	An integer is required.
9	Creditcard:	You must enter a valid credit card number.
10	Failed to: "# field"	The input value must be the same as # field.
11	Accept:	Enter a string with a valid suffix (the suffix of the uploaded file ).
12	Maxlength: 5	A string with a maximum length of 5 characters ).
13	Minlength: 10	The input is a string of at least 10 characters ).
14	Rangelength: [5, 10]	The input must be a string between 5 and 10 characters (one Chinese character ).
15	Range: [5, 10]	The input value must be between 5 and 10.
16	Max: 5	The input value cannot be greater than 5.
17	Min: 10	The input value cannot be less than 10.

Required indicates required

Email indicates that the email address must be correct.

The verification specification is written in the class in the HTML, and the method is inadequate. The maintenance in the later stage increases the cost, and the separation of behavior and structure is not implemented.

Therefore, you can clear all the classes in HTML as follows:

Copy codeThe Code is as follows:
<Form class = "cmxform" id = "commentForm" method = "get" action = "">
<Fieldset>
<Legend> A simple comment example with verification prompt for validate verification </legend>
<P>
<Label for = "cusername"> name </label>
<Em> * </em> <input id = "cusername" name = "username" size = "25"/>
</P>
<P>
<Label for = "cemail"> email </label>
<Em> * </em> <input id = "cemail" name = "email" size = "25"/>
</P>
<P>
<Label for = "curl"> URL </label>
<Em> </em> <input id = "curl" name = "url" size = "25"/>
</P>
<P>
<Label for = "ccomment"> your comment </label>
<Em> * </em> <textarea id = "ccomment" name = "comment" cols = "22"> </textarea>
</P>
<P>
<Input class = "submit" type = "submit" value = "submit"/>
</P>

Js

Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# CommentForm"). validate ({
Rules :{
Username :{
Required: true,
Minlength: 2
},
Email :{
Required: true,
Email: true
},
Url: "url ",
Comment: "required ",
Valcode :{
Formula: "7 + 9"
}
}
});
});
</Script>

Because the default prompt is in English, you can rewrite it

Copy codeThe Code is as follows:
JQuery. extend (jQuery. validator. messages ,{
Required: "required fields ",
Remote: "Please correct this field ",
Email: "Please enter an email in the correct format ",
Url: "enter a valid url ",
Date: "enter a valid date ",
DateISO: "enter a valid date (ISO ).",
Number: "enter a valid number ",
Digits: "Only integers can be entered ",
Creditcard: "enter a valid credit card number ",
Similar to: "Please enter the same value again ",
Accept: "enter a string with a valid suffix ",
Maxlength: jQuery. format ("enter a string with a maximum length of {0 "),
Minlength: jQuery. format ("enter a string with at least {0} length "),
Rangelength: jQuery. format ("enter a string between {0} and {1 "),
Range: jQuery. format ("enter a value between {0} and {1 "),
Max: jQuery. format ("enter a maximum value of {0 "),
Min: jQuery. format ("enter a minimum value of {0 ")
});

We recommend that you create a new js file and put it under validate. js.

Beautification of tips

Copy codeThe Code is as follows:
ErrorElement: "em"

Create a tag that can be customized

Copy codeThe Code is as follows:
Success: function (label ){
Label. text (""). addClass ('success ')
}

Here, the parameter label points to the created tag, which is "em". Then, add your own class to your content.

Complete js

Copy codeThe Code is as follows:
$ ("# CommentForm"). validate ({
Rules :{
Username :{
Required: true,
Minlength: 2
},
Email :{
Required: true,
Email: true
},
Url: "url ",
Comment: "required ",
},
ErrorElement: "em ",
Success: function (label ){
Label. text (""). addClass ('success ')
}
});

Corresponding css

Copy codeThe Code is as follows:
Em. error {
Background: url ("images/unchecked.gif") no-repeat 0px 0px;
Padding-left: 16px;
}
Em. success {
Background: url ("images/checked.gif") no-repeat 0px 0px;
Padding-left: 16px;
}

Put. success under. error... Well .. .. You can only understand what to say .. Well ..

During the project creation process, the verification information can be modified independently to meet different requirements ..

For example:

Copy codeThe Code is as follows:
Messages :{
Username :{
Required: "Master, I want to fill in full ",
Minlength: ", the length is not enough"
}
}

Complete js

Copy codeThe Code is as follows:
$ ("# CommentForm"). validate ({
Rules :{
Username :{
Required: true,
Minlength: 2
},
Email :{
Required: true,
Email: true
},
Url: "url ",
Comment: "required ",
Valcode :{
Formula: "7 + 9"
}
},
Messages :{
Username :{
Required: "Master, I want to fill in full ",
Minlength: ", the length is not enough"
}
},
ErrorElement: "em ",
Success: function (label ){
Label. text (""). addClass ('success ')
}
});

Here we can.

About custom verification rules

Add HTML code

Copy codeThe Code is as follows:
<P>
<Label for = "cvalcode"> Verification Code </label>
<Input id = "valcode" name = "valcode"/> = 7 + 9
</P>

Customize a rule

Copy codeThe Code is as follows:
$. Validator. addMethod ("formula", function (value, element, param ){
Return value = eval (param)
}, "Please enter the verification information correctly ");

Formula is the name of the method to be verified, such as required by required.
The value of the current input returned by value
Param returns the current custom authentication format, for example, 7 + 9.
After using the eval method to add strings

Complete js

Copy codeThe Code is as follows:
$. Validator. addMethod ("formula", function (value, element, param ){
Return value = eval (param)
}, "Please enter the verification information correctly ");
$ ("# CommentForm"). validate ({
Rules :{
Username :{
Required: true,
Minlength: 2
},
Email :{
Required: true,
Email: true
},
Url: "url ",
Comment: "required ",
Valcode :{
Formula: "7 + 9"
}
},
Messages :{
Username :{
Required: "Master, I want to fill in full ",
Minlength: ", the length is not enough"
}
},
ErrorElement: "em ",
Success: function (label ){
Label. text (""). addClass ('success ')
}
});

.. This is part of the foundation .. We will continue to study in depth. (^_^ )/~~ Bye bye