Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use jquery-validate". In daily operation, I believe many people have doubts about how to use jquery-validate. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use jquery-validate". Next, please follow the editor to study!

Jquery-validate refers to the form validation plug-in, which is developed based on jquery, which provides powerful validation capabilities for forms and makes client-side form validation easier; the plug-in bundles a set of useful verification methods, including URL and e-mail verification, and provides an API for writing user-defined methods.

The operating environment of this tutorial: windows7 system, jquery2.2.1&&jquery-validate1.14.0 version, Dell G3 computer.

Jquery-validate refers to the form validation plug-in, which is a validation plug-in based on jquery.

The jQuery Validate plug-in provides powerful validation capabilities for forms, makes client-side form validation easier, and provides a large number of customization options to meet the various needs of the application. The plug-in bundles a set of useful authentication methods, including URL and e-mail authentication, and provides an API for writing user-defined methods. All bundling methods use English as the error message by default and have been translated into 37 other languages.

The plug-in was written and maintained by J ö rn Zaefferer, a member of the jQuery team, the key developer of the jQuery UI team, and the QUnit maintainer. The plug-in has been around since early jQuery in 2006 and has been updated ever since. The current version is 1.14.0.

Visit the jQuery Validate website to download the latest version of the jQuery Validate plug-in.

Import js Library

Default check rule

The ordinal rule describes the fields that 1required:true must enter. 2remote: "check.php" uses the ajax method to call check.php to validate the input value. 3email:true must enter an email in the correct format. 4url:true must enter a URL in the correct format. 5date:true must enter a date in the correct format. Date check ie6 error, use with caution. The 6dateISO:true must enter a date in the correct format (ISO), for example: 2009-06-23, 1998-06-23. Only validate the format, not validate it. 7number:true must enter a legal number (negative, decimal). 8digits:true must enter an integer. 9creditcard: you must enter a valid credit card number. 10equalTo: the input value of "# field" must be the same as # field. 11accept: enter a string with a legal suffix (the suffix of the uploaded file). 12maxlength:5 inputs a string with a maximum length of 5 (Chinese characters are counted as one character). 13minlength:10 inputs a string with a minimum length of 10 (Chinese characters are counted as one character). 14rangelength: [5Jing 10] input must be a string between 5 and 10 in length (Chinese characters are counted as one character). 15range: [5pm 10] the input value must be between 5 and 10. The 16max:5 input value cannot be greater than 5. The 17min:10 input value cannot be less than 10.

Default prompt

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).", number: "Please enter a valid number.", digits: "Please enter only digits." Creditcard: "Please enter a valid creditcard number.", equalTo: "Please enter the same value again.", 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}.")}

JQuery Validate provides a Chinese message prompt package, which is located at / localization/messages_zh.js of the download package, with the following contents:

(function (factory) {if (typeof define = "function" & & define.amd) {define (["jquery", ".. / jquery.validate"], factory);} else {factory (jQuery);}} (function ($) {/ * * Translated default messages for the jQuery validation plugin. * Locale: ZH (Chinese, Chinese (Zhanxingw é n), Chinese) * / $.extend ($.validator.messages, {required: "this is a required field", remote: "Please correct this field", email: "Please enter a valid email address", url: "enter a valid URL", date: "enter a valid date" DateISO: "Please enter a valid date (YYYY-MM-DD)", number: "Please enter a valid number", digits: "only enter a valid number", creditcard: "Please enter a valid credit card number", equalTo: "your input is different", extension: "Please enter a valid suffix", maxlength: $.validator.format ("you can enter up to {0} characters") Minlength: $.validator.format ("enter at least {0} characters"), rangelength: $.validator.format ("Please enter a string between {0} and {1}"), range: $.validator.format ("Please enter a value between {0} and {1}"), max: $.validator.format ("Please enter a value not greater than {0}") Min: $.validator.format ("Please enter a value not less than {0}")}) }))

You can introduce the localization information file / localization/messages_zh.js into the page:

Mode of use

1. Write the verification rules to the control

$.validator.setDefaults ({submitHandler: function () {alert ("submit event!");}); $() .ready (function () {$("# commentForm"). Validate ();}); enter your name, mailbox, URL, comments.

Name (required, minimum two letters)

E-Mail (mandatory)

URL (optional)

Remarks (required)

2. Write the verification rules into the js code

Ready (function () {/ / verify the submission form $("# signupForm") after the keyboard is pressed and released and submitted. Validate ({rules: {firstname: "required", lastname: "required", username: {required: true, minlength: 2}, password: {required: true, minlength: 5} Confirm_password: {required: true, minlength: 5, equalTo: "# password"}, email: {required: true, email: true}, topic: {required: "# newsletter:checked", minlength: 2}, agree: "required"} Messages: {firstname: "Please enter your first name", lastname: "Please enter your last name", username: {required: "Please enter your user name", minlength: "user name must consist of two letters"}, password: {required: "Please enter your password" Minlength: "password length cannot be less than 5 letters"}, confirm_password: {required: "Please enter password", minlength: "password length cannot be less than 5 letters", equalTo: "two passwords are inconsistent"}, email: "Please enter a correct mailbox", agree: "Please accept our statement" Topic: "Please select two topics"}})})

At messages, if a control does not have message, the default information will be called

Validate the complete form

First name

Surnam

User name

Password

Verify password

Email

Please agree to our statement

I am happy to receive new information.

Theme (select at least two)-Note: if "I am happy to receive new information" is not checked, the following options will be hidden, but we are here as a demonstration to make it visible Marketflash Latest fuzz Mailing list digester Please select at least two topics you'd like to receive.

Description:

Required: the true value is required.

Required: if the value of the "# aa:checked" expression is true, it needs to be verified.

Required: function () {} returns true, indicating that verification is required.

The latter two are commonly used for elements that need to be filled in or not filled in the form at the same time.

Common methods and problems needing attention

1. Replace the default SUBMIT in other ways

Ready (function () {$("# signupForm") .validate ({submitHandler:function (form) {alert ("submit event!"); form.submit ();});})

Use ajax mode

(".selector") .validate ({submitHandler: function (form) {$(form) .ajaxSubmit ();}})

You can set the default value of validate as follows:

$.validator.setDefaults ({submitHandler: function (form) {alert ("submit event!"); form.submit ();}})

If you want to submit a form, you need to use form.submit () instead of $(form) .submit ().

2. Debug, only verify that the form is not submitted

If this parameter is true, then the form is not submitted, it is only checked, and it is very convenient to debug.

Ready (function () {$("# signupForm") .validate ({debug:true});})

If there are multiple forms on a page that want to be set to debug, use:

$.validator.setDefaults ({debug: true})

3. Ignore: ignore some elements and do not verify

Ignore: ".clients"

4. Change the location where error messages are displayed

ErrorPlacement:Callback

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 ());} at this point, the study on "how to use jquery-validate" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.