Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what are the relevant parameters of jquery.validate", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "what are the relevant parameters of jquery.validate?"

Jquery Validate related parameters

/ / define Chinese messages

Var cnmsg = {

Required: "required fields"

Remote: "Please correct this field"

Email: "Please enter an email in the correct format"

Url: "Please enter a valid URL"

Date: "Please enter a valid date"

DateISO: please enter a valid date (ISO).

Number: "Please enter a legal number"

Digits: "only integers can be entered"

Creditcard: "Please enter a valid credit card number"

EqualTo: "Please enter the same value again"

Accept: "Please enter a string with a legal suffix"

Maxlength: jQuery.format ("Please enter a string of up to {0} length")

Minlength: jQuery.format ("Please enter a string of at least {0} length")

Rangelength: jQuery.format ("Please enter a string between {0} and {1}")

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

Max: jQuery.format ("Please enter a value up to {0}")

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

}

JQuery.extend (jQuery.validator.messages, cnmsg)

Validate Custom Verification

$(document) .ready (function () {

/ * *

* ID card number verification

*

* /

Function isIdCardNo (num) {

Var factorArr = new Array (7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 5, 4, 2, 1)

Var parityBit=new Array ("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2")

Var varArray = new Array ()

Var intValue

Var lngProduct = 0

Var intCheckDigit

Var intStrLen = num.length

Var idNumber = num

/ / initialize

If ((intStrLen! = 15) & & (intStrLen! = 18)) {

Return false

}

/ / check and set value

For (iSuppli)

VarArray [I] = idNumber.charAt (I)

If (varArray [I]

< '0' || varArray[i] >

'9') & & (I! = 17)) {

Return false

} else if (I

< 17) { 　　varArray[i] = varArray[i] * factorArr[i]; 　　} 　　} 　　if (intStrLen == 18) { 　　//check date 　　var date8 = idNumber.substring(6,14); 　　if (isDate8(date8) == false) { 　　return false; 　　} 　　// calculate the sum of the products 　　for(i=0;i 2500) return false 　　if (month < 1 || month >

12) return false

Return true

}

/ * *

* determine whether it is a "YYYYMMDD" period

*

* /

Function isDate8 (sDate) {

If (! / ^ [0-9] {8} $/ .test (sDate)) {

Return false

}

Var year, month, day

Year = sDate.substring (0,4)

Month = sDate.substring (4,6)

Day = sDate.substring (6,8)

Var iaMonthDays = [31, 28, 31, 31, 30, 31, 31, 30, 31, 31, 31, 31, 30, and 31]

If (year

< 1700 || year >

2500) return false

If (year% 4 = = 0) & & (year% 100! = 0)) | (year% 400 = = 0) iaMonthDays [1] = 29

If (month

< 1 || month >

12) return false

If (day

< 1 || day >

IaMonthDays [month-1]) return false

Return true

}

/ / ID card number verification

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

Return this.optional (element) | | isIdCardNo (value)

}, "Please enter the ID number correctly")

/ / alphanumeric

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

Return this.optional (element) | | / ^ [a-zA-Z0-9] + $/ .test (value)

}, "only English letters and numbers")

/ / Postal Code Verification

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

Var tel = / ^ [0-9] {6} $/

Return this.optional (element) | | (tel.test (value))

}, "Please fill in the zip code correctly")

/ / Chinese characters

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

Var tel = / ^ [\ u4e00 -\ u9fa5] + $/

Return this.optional (element) | | (tel.test (value))

}, "please enter Chinese characters")

/ / minimum character length verification (a Chinese character length is 2)

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

Var length = value.length

For (var I = 0; I

< value.length; i++) { 　　if (value.charCodeAt(i) >

127) {

Length++

}

}

Return this.optional (element) | | (length > = param)

}, $.validator.format ("length cannot be less than {0}!")

/ / maximum character length verification (a Chinese character length is 2)

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

Var length = value.length

For (var I = 0; I

< value.length; i++) { 　　if (value.charCodeAt(i) >

127) {

Length++

}

}

Return this.optional (element) | | (length param

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

/ / the verification value cannot be more than two decimal places

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

Var decimal = / ^ -?\ d + (\.\ d {1pr 2})? $/

Return this.optional (element) | | (decimal.test (value))

JQuery.validate usage

Validate (options) returns: Validator validates the selected FORM.

Valid () returns: Boolean checks whether the verification is passed.

Rules () returns: Options returns the validation rules for the element.

Rules (add,rules) returns: Options adds validation rules.

Rules (remove,rules).

Jquery.validate is a very excellent verification framework based on jquery, through which we can quickly validate some common inputs, expand our own verification methods, and have very good support for internationalization.

Usage:

1. First download jquery.js and jquery.validate.js and import the js file (Note: jquery must be introduced before jquery.validate.js, otherwise an error will be reported)

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

< /script>

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

< /script>

2. Write the form code that needs to be verified and write the verification code (there are two ways to write the verification code, first of all, use the normal way)

Var validator = $("formId") .validate ({/ / # formId is the form ID that needs to be validated

ErrorElement: "div", / / error is marked with "div" tag. Default: "label".

Wrapper: "li", / / use the "li" tag to wrap the errorELement above

ErrorClass: "validate-error", / / the css class name of the error prompt "error"

Whether onsubmit:true,// is submitting is verified. Default: true

Whether onfocusout:true,// verifies when getting focus. Default: true

Onkeyup: whether true,// verifies when tapping the keyboard. Default: true

Whether onclick:false,// is verified at mouse click (generally verify checkbox,radiobox)

FocusCleanup:false,// removes error prompts when elements that fail validation gain focus

Rules: {

LoginName: {/ / input box name that needs to be verified

Required: true// verification condition: required

}

LoginPassword: {/ / input box name that needs to be verified

Required: true,// verification condition: required

Minlength: 5Universe / verification condition: minimum length is 5

}

Email: {/ / input box name that needs to be verified

Required: true,// verification condition: required

Email: true// verification condition: format is email

}

}

Messages: {

LoginName: {

Required: "user name is not allowed to be empty!" / / verify failed messages

}

LoginPassword: {

Required: "password is not allowed to be empty!"

Minlength: jQuery.format ("enter at least {0} characters for password!")

}

Email: {

Required: "email cannot be empty"

Email: "the email address is in the wrong format!"

}

}

3. Use meta String for verification, that is, verify the content and write it to class (note that jquery.metadata.js file needs to be introduced in meta String mode)

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

< /script>

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

< /script>

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

< /script>

< form id="validate" action="admin/transfer!save.action" method="post">

< input type="text" class="required" name="entity.name" />

< input type="text" class="email" name="entity.email" />

< input type="submit" class="button" value="提 交" />

< /form>

< script type="text/javascript">

$(document) .ready

Function () {

$("# formId") .validate ({/ / # formId is the form ID that needs to be validated

Meta: "validate" / / verify the content using meta String (verify the content and write it to class)

ErrorElement: "div", / / error is marked with "div" tag. Default: "label".

Wrapper: "li", / / use the "li" tag to wrap the errorELement above

ErrorClass: "validate-error", / / the css class name of the error prompt "error"

Whether onsubmit:true,// is submitting is verified. Default: true

Whether onfocusout:true,// verifies when getting focus. Default: true

Onkeyup: whether true,// verifies when tapping the keyboard. Default: true

Whether onclick:false,// is verified at mouse click (generally verify checkbox,radiobox)

FocusCleanup:false,// removes error prompts when elements that fail validation gain focus

})

})

< /script>

Note: input forms in the form of name= "entity.name" are often encountered in Struts2 applications (that is, when the name contains commas or other special symbols), we can enclose the above names in quotation marks (""), such as:

Rules: {

"entity.loginName": {/ / input box name that needs to be verified

Required: true// verification condition: required

}

}

Messages: {

"entity.loginName": {

Required: "user name is not allowed to be empty!" / / verify failed messages

}

}

Please give me email:happyczx@126.com. Welcome to discuss some questions about java technology.

The above part of the code comes from payj open source payment system, this java open source project has a lot of excellent Struts2 spring hibernate jquery and other framework application source code, it is worth a look. I'd like to recommend it here first, hehe.

Ps:Jquery Validate validation rules

(1) required:true required fields.

(2) remote: "check.php" uses the ajax method to call check.php to verify the input value.

(3) email:true must enter an email in the correct format.

(4) url:true must enter a URL in the correct format.

(5) date:true must enter a date in the correct format.

(6) dateISO:true must enter a date (ISO) in the correct format, for example, 2009-06-23, 1998, ap01and22 only validates the format, not validates it.

(7) number:true must enter legal numbers (negative, decimal).

(8) digits:true must enter an integer.

(9) creditcard: you must enter a valid credit card number.

(10) equalTo: the input value of "# field" must be the same as # field.

(11) accept: enter a string with a legal suffix (the suffix of the uploaded file).

(12) maxlength:5 inputs a string with a maximum length of 5 (Chinese characters are counted as one character).

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

(14) rangelength: [5pc10] input must be a string between 5 and 10 ") (Chinese characters are counted as one character).

(15) range: [5pc10] the input value must be between 5 and 10.

(16) the input value of max:5 cannot be greater than 5.

(17) the input value of min:10 cannot be less than 10.

Jquery Validate submit submission

SubmitHandler: the function that runs after verification, with the function submitted by the form added, otherwise the form will not be submitted.

$(".selector") .validate ({submitHandler:function (form) {$(form) .ajaxSubmit (); / / use the function of Jquery Form}})

Jquery Validate error error prompts dom.

.errorPlacement: Callback Default: put the error message after the validated element.

Indicates where the error is placed. The default is: error.appendTo (element.parent ()); that is, the error message is placed after the validated element.

ErrorPlacement: function (error, element) {

Error.appendTo (element.parent ())

}

To set the style of the error prompt, you can increase the icon display, like:

Input.error {border: 1px solid red;}

Label.error {

Background:url (". / demo/images/unchecked.gif") no-repeat 0px 0px

Padding-left: 16px

Padding-bottom: 2px

Font-weight: bold

Color: # EA5200

}

The above is all the contents of the article "what are the relevant parameters of jquery.validate"? thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.