Usage of jQuery. Validate verification Library

JQuery. Validate verification Library
1. Download jquery. validate, here I provide jquery-validation-1.9.0, click to download

Default verification rules

Copy codeThe Code is as follows: (1) required: true mandatory 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 must enter the url in the correct format
(5) date: true must be a date in the correct format
(6) dateISO: true: the date (ISO) in the correct format must be entered. For example, 2009-06-23,1998/01/22: only the format is verified and the validity is not verified.
(7) number: true: a valid number (negative number, decimal number) must be entered)
(8) digits: true must be an integer.
(9) creditcard: a valid credit card number must be entered.
(10) must 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: A string with a maximum length of 5 characters)
(13) minlength: 10 string with a minimum input length of 10 (one character for Chinese characters)
(14) rangelength: [5, 10] The input length must be a string between 5 and 10. ") (a Chinese character is a single character)
(15) range: [5, 10] The input value must be between 5 and 10.
(16) max: 5 input value cannot be greater than 5
(17) min: 10 input value cannot be less than 10

Default promptCopy codeThe Code is as follows: messages :{
Required: "This field is required .",
Remote: "Please fix this field .",
Email: "Please enter a valid email address .",
Url: "Please enter a valid URL .",
Date: "Please enter a valid date .",
DateISO: "Please enter a valid date (ISO ).",
DateDE: "Bitte geben Sie ein g eyebrow ltiges Datum ein .",
Number: "Please enter a valid number .",
NumberDE: "Bitte geben Sie eine Nummer ein .",
Digits: "Please enter only digits ",
Creditcard: "Please enter a valid credit card number .",
Failed to: "Please enter the same value again .",
Accept: "Please enter a value with a valid extension .",
Maxlength: $. validator. format ("Please enter no more than {0} characters ."),
Minlength: $. validator. format ("Please enter at least {0} characters ."),
Rangelength: $. validator. format ("Please enter a value between {0} and {1} characters long ."),
Range: $. validator. format ("Please enter a value between {0} and {1 }."),
Max: $. validator. format ("Please enter a value less than or equal to {0 }."),
Min: $. validator. format ("Please enter a value greater than or equal to {0 }.")
},

Save the following js Code as messages_cn.js and reference it on the page:Copy codeThe Code is as follows: <script language = "JavaScript" type = "text/JavaScript" src = "messages_cn.js"> </script>

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. validator. format ("enter a string with a maximum length of {0 "),
Minlength: jQuery. validator. format ("enter a string with at least {0} length "),
Rangelength: jQuery. validator. format ("enter a string between {0} and {1 "),
Range: jQuery. validator. format ("enter a value between {0} and {1 "),
Max: jQuery. validator. format ("enter a maximum value of {0 "),
Min: jQuery. validator. format ("enter a minimum value of {0 ")
});

Usage
1. Write the validation rule to the control.Copy codeThe Code is as follows: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery-1.6.1.js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. validate. min. js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. metadata. js"> </script>

<Script>
$ (). Ready (function (){
$ ("# SignupForm"). validate ();
});
</Script>

<Form id = "signupForm" method = "get" action = "">
<P>
<Label for = "firstname"> Firstname </label>
<Input id = "firstname" name = "firstname" class = "required"/>
</P>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email" class = "required email"/>
</P>
<P>
<Label for = "password"> Password </label>
<Input id = "password" name = "password" type = "password" class = "{required: true, minlength: 5}"/>
</P>
<P>
<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password" class = "{required: true, minlength: 5, failed to: '# password'}"/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</Form>

To use class = "{}", you must introduce the package: jquery. metadata. js.

You can use the following method to modify the prompt content:

Copy codeThe Code is as follows: <input id = "firstname" name = "firstname" class = "{required: true, minlength: 5, messages: {required: 'Enter the content'} "/>

The code above indicates that if the firstname field does not fill in any content, the prompt is: Enter the content. If the length of the entered content is less than 5, the system prompts the user to write the content? See the following code:Copy codeThe Code is as follows: <input id = "firstname" name = "firstname" class = "{required: true, minlength: 5, messages: {required: 'Enter the content', minlength: 'string length cannot be less than 5'} "/>

Note: when using the sort to keyword, the following content must be enclosed in quotation marks, as shown in the following code:Copy codeThe Code is as follows: class = "{required: true, minlength: 5, failed to: '# password '}"

Another method is to use the keyword meta.

For example, change the code in the preceding example to the keyword meta form. The Code is as follows:

Copy codeThe Code is as follows: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery-1.6.1.js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. validate. min. js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. metadata. js"> </script>

<Script>
$ (). Ready (function (){
$ ("# SignupForm"). validate ({meta: "validate "});
});
</Script>

<Form id = "signupForm" method = "get" action = "">
<P>
<Label for = "firstname"> Firstname </label>
<Input id = "firstname" name = "firstname" class = "{validate: {required: true, minlength: 5, messages: {required: 'Enter the content ', minlength: 'string length cannot be less than 5' }}"/>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email" class = "{validate: {required: true, email: true}"/>
</P>
<P>
<Label for = "password"> Password </label>
<Input id = "password" name = "password" type = "password" class = "{validate: {required: true, minlength: 5}"/>
</P>
<P>
<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password" class = "{validate: {required: true, minlength: 5, failed: '# password'} "/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</Form>

Note:

The complete application form of the rule is as follows:

Correct syntax:

Copy codeThe Code is as follows: <input id = "email" name = "email" class = "{validate: {required: true, email: true}"/>

Incorrect syntax:Copy codeThe Code is as follows: <input id = "email" name = "email" class = "{validate: {required email}"/>

There is another wayCopy codeThe Code is as follows: $. metadata. setType ("attr", "validate ");

In this way, validate = "{required: true}" or class = "required" can be used, but class = "{required: true, minlength: 5}" will not work.

For example, change the sample code above:

Copy codeThe Code is as follows: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery-1.6.1.js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. validate. min. js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. metadata. js"> </script>

<Script>
$ (). Ready (function (){
$. Metadata. setType ("attr", "validate ");
$ ("# SignupForm"). validate ();
});
</Script>

<Form id = "signupForm" method = "get" action = "">
<P>
<Label for = "firstname"> Firstname </label>
<Input id = "firstname" name = "firstname" validate = "{required: true}"/>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email" validate = "{required: true, email: true}"/>
</P>
<P>
<Label for = "password"> Password </label>
<Input id = "password" name = "password" type = "password" validate = "{required: true, minlength: 5}"/>
</P>
<P>
<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password" validate = "{required: true, minlength: 5, failed to: '# password'}"/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</Form>

Note: The rules are partially applied in the complete form, that is

Correct syntax:

Copy codeThe Code is as follows: <input id = "email" name = "email" validate = "{required: true, email: true}"/>

Incorrect syntax:Copy codeThe Code is as follows: <input id = "email" name = "email" validate = "{required email}"/>

2. Write the validation rules to the code.Copy codeThe Code is as follows: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery-1.6.1.js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. validate. min. js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. metadata. js"> </script>
<Script>
$ (). Ready (function (){
$ ("# SignupForm"). validate ({
Rules:
{
Firstname: "required ",
Email:
{
Required: true,
Email: true
},
Password:
{
Required: true,
Minlength: 5
},
Confirm_password:
{
Required: true,
Minlength: 5,
Failed to: "# password"
}
},
Messages:
{
Firstname: "enter your name ",
Email:
{
Required: "Enter the Email address ",
Email: "enter the correct email address"
},
Password:
{
Required: "enter the password ",
Minlength: jQuery. format ("the password cannot be less than {0} characters ")
},
Confirm_password:
{
Required: "enter the password ",
Minlength: "The password cannot be less than five characters ",
Similar to: "inconsistent passwords entered twice"
}
}
});
});
// If a control does not have a message, the default message is called.
</Script>
<Form id = "signupForm" method = "get" action = "">
<P>
<Label for = "firstname"> Firstname </label>
<Input id = "firstname" name = "firstname"/>
</P>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email"/>
</P>
<P>
<Label for = "password"> Password </label>
<Input id = "password" name = "password" type = "password"/>
</P>
<P>
<Label for = "confirm_password"> Confirm Password </label>
<Input id = "confirm_password" name = "confirm_password" type = "password"/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</Form>

Required: true must have a value

When a dom named aa is selected by required: "# aa: checked" id, you need to verify

Required: function () {} returns true, indicating that verification is required (only valid for required, other invalid .)

The following two types of elements are commonly used: elements that need to be filled in or out of the form

The following is an example of the above three items, which is easier to understand. (First note: required: true must have a value. This is not an example. It is clear through the above example .)

The following is an example of required: "# aa: checked:

Copy codeThe Code is as follows: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery-1.6.1.js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. validate. min. js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. metadata. js"> </script>
<Script>
$ (). Ready (function (){
$ ("# SignupForm"). validate ({
Rules:
{
Firstname: "required ",
Email:
{
Required: "# open: checked ",
Email: true
}
},
Messages:
{
Firstname: "enter your name ",
Email:
{
Required: "Enter the Email address ",
Email: "enter the correct email address"
}
}
});
});
// If a control does not have a message, the default message is called.
</Script>
<Form id = "signupForm" method = "get" action = "">
<P>
Switch:
<Input id = "open" name = "open" type = "radio"/>
<Label for = "open"> open </label>
<Input id = "close" name = "close" type = "radio"/>
<Label for = "close"> close </label>
</P>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email"/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</Form>

When "open" is selected, the email is verified.

The following is an example of required: function:

Copy codeThe Code is as follows: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery-1.6.1.js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. validate. min. js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "jquery. metadata. js"> </script>
<Script>
$ (). Ready (function (){
$ ("# SignupForm"). validate ({
Rules:
{
Firstname: "required ",
Email:
{
Required: function ()
{
Return true;
},
Email: function ()
{
Return false;
}
}
},
Messages:
{
Firstname: "enter your name ",
Email:
{
Required: "Enter the Email address ",
Email: "enter the correct email address"
}
}
});
});
// If a control does not have a message, the default message is called.
</Script>
<Form id = "signupForm" method = "get" action = "">
<P>
Switch:
<Input id = "open" name = "open" type = "radio"/>
<Label for = "open"> open </label>
<Input id = "close" name = "close" type = "radio"/>
<Label for = "close"> close </label>
</P>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email"/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</Form>

After testing, it is learned that, even if email: function () {return false}); is false, but required: function () {return true ;}, true is returned, in addition to verifying whether it is null, the system also verifies the email format. That is to say, the email: function () {reuturn false;} setting is invalid. For further testing, remove required: function () {return true;} and only retain: email: function () {reuturn false;}. The email format is still verified. The Code is as follows:Copy codeThe Code is as follows: $ ("# signupForm"). validate ({
Rules:
{
Firstname: "required ",
Email:
{
Email: function ()
{
Return false;
}
}
},
Messages:
......

Note: Write the validation rules in a file separately, such as firstname and email in the rules rule in the preceding example. The problem is that there is an id and name attribute in the input, which one does JQuery Validation obtain? Through the test, the name attribute is obtained. Therefore, the key in rules is the name attribute value of input, not the id attribute value.

Define style code

Copy codeThe Code is as follows:/* jQuery. Validate css */
Input. error {border: 1px dotted red ;}
Label. error {
Background-image: url('del.gif ');
Background-repeat: no-repeat;
Padding-left: 18px;
Color: red;
}

Input. error defines the input control style

Label. error defines the error message Style

As shown in: