Validation-jquery Form Validation Plugin use method

Http://www.cnblogs.com/shuang121/archive/2012/04/23/2466628.html

Role

Jquery.validate is a validation framework for jquery, and with the advantage of jquery, we can quickly validate some of the common inputs and expand our own validation methods and support internationalization as well.

Pre-use arrangement

Description: Requires jquery version: 1.2.6+

Steps:

To import the appropriate jquery.js and jquery.validate.js files
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Jquery.validate.js" type= "Text/javascript" ></script>

Specify a validation rule on the appropriate field
Name *<input type= "text" name= "LoginName" class= "required" >
where class= "Required" represents this field must be entered data

Specify that you want to validate the form
<script type= "Text/javascript" >

$ (function () {

$ ("#testForm"). Validate ();

});

</script>

Effects such as:

Basic knowledge

Specify how validation rules are

Write validation rules to the class attribute of the field element

Cases:

Name * <input type= "text" name= "LoginName" class= "required" ><br>

Secret * <input type= "password" name= "password" class= "required" ><br>

Re-enter <input type= "password" name= "Password2"

Class= "{equalto: ' [Name=password] '} required" ><br>

Birthday <input type= "text" name= "Birthday" class= "Dateiso" ><br>

E-mail *<input type= "text" name= "email" class= "email" ><br>

PAR (Zip) <input type= "file" name= "resource" class= "{accept: ' Zip '} ' >

Description

If you use class= "{Key:value,...}" The way that must be introduced: Jquery.metadata.js

The name of the form field cannot be duplicated, otherwise the configured validation does not work.

Validation rules for passing fields when calling the Validate () method

$ (function () {

$ ("#testForm"). Validate ({

Rules: {

loginname:{

Required:true,

Minlength:2

}   ,

Password: {

Required:true

},

Password2: {

Equalto: "Input[name=password]"

}

}

});

});

Built-in validation rules

Required:true	Required Fields
Remote: "check.php"	Validating input values using the Ajax method call check.php
Email:true	You must enter an email in the correct format
Url:true	You must enter a URL in the correct format
Date:true	You must enter a date in the correct format
Dateiso:true	You must enter the correct format for the date (ISO), for example: 2010-01-01, 2010/01/01 only verify the format, do not validate the validity
Number:true	You must enter a valid number (negative, fractional)
Digits:true	You must enter an integer
CreditCard	You must enter a valid credit card number
Equalto: "#field"	The input value must be the same as $ ("#field")
Accept: "Gif|png|jpg"	Enter a string with a valid suffix name (the suffix of the upload file), with a ' | ' between multiple suffixes Separated
Maxlength:5	Enter a string with a maximum length of 5 (Chinese characters are counted as one character)
Minlength:3	Enter a string with a minimum length of 3 (Chinese characters are counted as one character)
RANGELENGTH:[5,10]	Enter a string that must be between 5 and 10 "(Chinese characters are counted as one character)
RANGE:[5,10]	The input value must be between 5 and 10
Max:5	Input value cannot be greater than 5
Min:10	Input value cannot be less than 10

Description

Remote Authentication: For example, registration verifies that the user name has been registered, the return value can only be true (validation succeeds), or False (validation failed). When the specified URL is accessed, the value of the current field is automatically passed as a parameter (with the field name key).

Quotation marks in some property values cannot be omitted, otherwise an error occurs. such as accept, Equalto and so on.

Problems with remote use: When adding a user, you need to verify that the user name exists, and when you add the previous user, and then add the user name again without leaving the page, validate cannot prompt that the user already exists, because jquery still considers the user name to be available because of the caching reason. The workaround is to add: $ () to the page. Ready (function () {

$.ajaxsetup ({

Cache:false//Turn off AJAX-appropriate caches

}); Turn off the caching feature

});

Add to

To modify the error message prompt location:

Modifies the error location of the jquery validate, putting the error in input and clearly prompting the message when the mouse focus is obtained.
Specific Use method:
var validator = $ ("#myContainerForm"). Validate ({
Focuscleanup:true,//clear the error message when the error element get focus again.
Onkeyup:false,
Errorplacement:function (Error, Element) {
Showerrormesssgediv (error,element);
},
rules:{
name:{
Required:true
}
},
Messages: {
name:{
Required:populateerrormessage ($ ("#errorRequiredMessage"). Val (), $ ("#containerNameTitle"). Val ())
}
}
});

Custom validation Rules

In addition to the built-in validation rules, validation also allows custom validation rules. This is done through the validation addmethod () method, which is:

JQuery.validator.addMethod ("name", Function,message)

which

Name of the validation rule

The function defines the rules for validation. Parameters have?. The return value is?.

Message is a hint when validation fails.

Specifying error message Content

Change the default prompt content

Jquery.extend (JQuery.validator.messages, {

Required: "Required field",

Remote: "Please specify a value that is not duplicated",

Email: "Please enter the correct format of e-mail",

URL: "Please enter a valid URL",

Date: "Please enter a valid date",

Dateiso: "Please enter a valid date (ISO).",

Number: "Please enter a valid digit",

Digits: "Can only enter integers",

CreditCard: "Please enter a valid credit card number",

Equalto: "Please enter the same value again",

Accept: "Please enter a string with a valid suffix name",

Maxlength:jQuery.validator.format ("Maximum allowed length is {0} characters"),

Minlength:jQuery.validator.format ("minimum allowable length is {0} characters"),

Rangelength:jQuery.validator.format ("allowed lengths are between {0} and {1}"),

Range:jQuery.validator.format ("Please enter a value between {0} and {1}"),

Max:jQuery.validator.format ("Please enter a value of {0} max"),

Min:jQuery.validator.format ("Please enter a value of minimum {0}")

});

Individual Forms change prompt content (valid only for the current form)

Method One:

<input type= "File" Name= "Parresource"

Class= "{required:true, Accept: ' Zip ', messages: {required: ' Please select File ', accept: ' Please select the correct file '}} ' >

Method Two:

$ (function () {

$ ("#testForm"). Validate ({

messages:{

LoginName: {

Required: "Required field 2"

},

Email: {

Required: ' Required field 22 ',

Email: "Please enter the correct format of e-mail 2"

}

}

});

});

Change the error message display style

You can specify the style of the Label.error, as follows:

<style type= "Text/css" >

label.error{

margin-left:10px;

color:red;

}

</style>

Description: Label.error refers to a LABEL element with class error, such as: <label for= "resource" class= "error" >