Jquery.validate use

JQuery Validate Usage Summary:

First, Import JS Library

<script src= ". /js/jquery.js "type=" Text/javascript "></script>

<script src= ". /js/jquery.validate.js "type=" Text/javascript "></script>

If you also import jquery.validate.unobtrusive may conflict validation does not work

Second, the default check rule

(1) Required:true must lose field

(2) Remote: "check.php" using Ajax method call check.php Validate input value

(3) Email:true must enter the correct format of e-mail

(4) Url:true must enter the correct format of the URL

(5) Date:true must enter the correct format date and date check IE6 error, use with caution

(6) Dateiso:true must enter the correct format for the date (ISO), for example: 2009-06-23, 1998/01/22 only verify the format, do not verify the validity

(7) Number:true must enter a valid number (negative, fractional)

(8) Digits:true must enter an integer

(9) CreditCard: Must enter a valid credit card number

Equalto: The "#field" input value must be the same as #field

(one) Accept: Enter a string with a valid suffix (the suffix of the uploaded file)

Maxlength:5 input string with a maximum length of 5 (Chinese characters are counted as one character)

(minlength:10) Enter a string with a minimum length of 10 (Chinese characters are counted as one character)

(rangelength:[5,10] Enter a string that must be between 5 and 10 in length) (Chinese characters are counted as one character)

(range:[5,10] 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

Third, the default hints

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.",

Equalto: "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 of less than or equal to {0}."),

Min: $.validator.format ("Please enter a value greater than or equal to {0}.")

},

If you need to modify, you can add in the JS code:

Jquery.extend (JQuery.validator.messages, {

Required: "Required field",

Remote: "Please fix this field",

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 ("Please enter a string with a maximum length of {0}"),

Minlength:jQuery.validator.format ("Please enter a string with a minimum length of {0}"),

Rangelength:jQuery.validator.format ("Please enter a string 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}")

});

Recommended practice, put this file into messages_cn.js and introduce it in the page

<script src= ". /js/messages_cn.js "type=" Text/javascript "></script>

Iv. mode of Use 1. Officer rules written to the control

<script src= ". /js/jquery.js "type=" Text/javascript "></script>

<script src= ". /js/jquery.validate.js "type=" Text/javascript "></script>

<script src= "./js/jquery.metadata.js" type= "Text/javascript" ></script>

$ (). Ready (function () {

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

});

<form id= "Signupform" method= "Get" action= "" >

<p>

<label for= "FirstName" >Firstname</label>

<input id= "FirstName" name= "FirstName" class= "Required"/>

</p>

<p>

<label for= "Email" >E-Mail</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,equalto: ' #password '} "/>

</p>

<p>

<input class= "Submit" type= "submit" value= "Submit"/>

</p>

</form>

To use class= "{}", the package must be introduced: Jquery.metadata.js

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

Class= "{required:true,minlength:5,messages:{required: ' Please enter content '}}"

When using the Equalto keyword, the following must be enclosed in quotation marks, as follows:

Class= "{required:true,minlength:5,equalto: ' #password '}"

2. Officer rules written in JS code

$ (). Ready (function () {

$ ("#signupForm"). Validate ({

Rules: {

FirstName: "Required",

Email: {

Required:true,

Email:true

},

Password: {

Required:true,

Minlength:5

},

Confirm_password: {

Required:true,

Minlength:5,

Equalto: "#password"

}

},

Messages: {

FirstName: "Please enter your name",

Email: {

Required: "Please enter your email address",

Email: "Please enter the correct email address"

},

Password: {

Required: "Please enter your password",

Minlength:jQuery.format ("Password cannot be less than {0} characters")

},

Confirm_password: {

Required: "Please enter the confirmation password",

MinLength: "Confirm password cannot be less than 5 characters",

Equalto: "Two times input password inconsistent inconsistent"

}

}

});

});

Messages, if a control does not have a message, the default information is called

<form id= "Signupform" method= "Get" action= "" >

<p>

<label for= "FirstName" >Firstname</label>

<input id= "FirstName" name= "FirstName"/>

</p>

<p>

<label for= "Email" >E-Mail</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

Required: The value of the "#aa: Checked" expression is true, you need to verify

Required:function () {} Returned to true, table needs to be validated

Two elements that are commonly used in the form and that need to be filled or not filled in

Demo

$ ("#form1"). Validate ({//JQ front-end checksum

Rules: {

Ctl00$maincontent$txtwebname: {

Required:true,

maxlength:500

},

Ctl00$maincontent$txtshortname: {

MAXLENGTH:500,

Required:false

},

Ctl00$maincontent$txtkeywords: {

Required:false,

maxlength:500

},

Ctl00$maincontent$txtgoodsno: {

Required:false,

maxlength:250

},

Ctl00$maincontent$txtremark: {

Required:false,

maxlength:500

},

Ctl00$maincontent$txtpagetitle: {

Required:true,

maxlength:1000

},

Ctl00$maincontent$txtmetakey: {

Required:false,

maxlength:1000

},

Ctl00$maincontent$txtshowurl: {

Required:false,

maxlength:2000,

Url:true

},

Ctl00$maincontent$txtotherdata: {

Required:false,

maxlength:1000

},

Ctl00$maincontent$txtec: {required:true, digits:true},

Ctl00$maincontent$txtfullep: {required:true, digits:true},

Ctl00$maincontent$txtmarketprice: {required:true, number:true},

Ctl00$maincontent$txtcash: {required:true,number:true},

Ctl00$maincontent$txtdurationdays:{required:false,number:true},

Ctl00$maincontent$txtfullcash:{required:true,number:true}

},

Messages: {

Ctl00$maincontent$txtwebname: "* Please enter the product name [within 500 words]",

Ctl00$maincontent$txtshortname: "* limited to 500 words or less",

Ctl00$maincontent$txtkeywords: "* Within 500 words",

Ctl00$maincontent$txtgoodsno: "* within 250 words",

Ctl00$maincontent$txtremark: "* Within 500 words",

Ctl00$maincontent$txtpagetitle: "* Please enter the title of the category page",

Ctl00$maincontent$txtmetakey: "* Within 1000 words",

Ctl00$maincontent$txtshowurl: "* Please enter the correct URL address",

Ctl00$maincontent$txtotherdata: "* Within 1000 words",

Ctl00$maincontent$txtec: "* can only enter integers",

CTL00$MAINCONTENT$TXTFULLEP: "* can only enter integers",

Ctl00$maincontent$txtcash: "* Please enter the correct number of cash",

Ctl00$maincontent$txtfullcash: "* Please enter the correct number of cash",

Ctl00$maincontent$txtdurationdays: "Number must be entered",

Ctl00$maincontent$txtmarketprice: "* Please enter the correct market price"

}

}); Validate

Custom validation Rules

JQuery.validator.addMethod ("GT", function (value, element, param) {

var r = ($ ("#abc"). val () = = "abc");

return R;

}, $.validator.format ("Input value must be greater than {0}!"));

Jquery.validate use