jquery Validate Form Verification learning notes

Recently have a project, use a lot of form check, try a bit jquery.validator, very conveniently, address: http://plugins.jquery.com/project/validate, basic usage:

The code is as follows

Copy Code

$ (' #formId '). Validate ({ Debug:true,//Open debug mode, not true submission, suitable for testing rules:{ UName: "Required",//need to be entered unick:{ Required:true Another form of writing that needs to be entered ublog:{ Required:true, Url:true //input required, and must be a URL for entry }, messages:{//Custom prompt text UName: "Please enter user name" }, Submithandler:function (form) {//form submission, requires Jqueyr.form plugin Form.submit (); } }

Reading the document will almost understand that the supported checksum formats are:

Required: Required Fields

Email: Email

URL: Legal URL

Date: Dates

Dateiso: Date (ISO)

Number: Numbers

Digits: integer

CreditCard: Credit card number

Equalto: Same value

Accept: A string with a legal suffix name

MaxLength: string of up to length

MinLength: string with minimum length

Rangelength: A string between the minimum and maximum values

Range: A value between the minimum and maximum values

Max: Max value

Min: Minimum value

Relatively high order one point function:

• Custom error message
Of course, you can modify the hint by defining messages, but you want to be lazy and do not want to use the default English prompts, directly introduce the default hint text

The code is as follows	Copy Code
<script src= "Path/to/localization/messages_cn.js" type= "Text/javascript" ></script>

Bugs that don't work under IE6
Rumor IE6, Jquery.validate.js have garbled, not normal work, solution:

The code is as follows	Copy Code
<script src= "Path/to/jquery.validate.js" type= "Text/javascript" charset= "Iso-8859-1" ></script>

• Control where error messages are displayed
Sometimes the default error message displays a problem, such as multiple radio boxes, the default will be the error message displayed in the first radio box behind the page is messy, the solution:

The code is as follows	Copy Code
Errorplacement:function (Error, Element) { if (Element.is (": Radio")) { Error.appendto (Element.parent (). Parent ("TD"); else { Error.appendto (Element.parent ()); } }

Of course, you can also overload Invalidhandler to implement

• Dependent checksum

Sometimes, the validation of an input box depends on other conditions, such as login can be logged through the user name or mailbox, only when the user chooses to log in with the mailbox, the Mailbox input box verification, the rules can be written:

The code is as follows	Copy Code
umail:{ Required:{depends:function (Element) { return true = = = $ (' #isMail '). Val (); }}, Email:true }

This will only check the mailbox entry if the user chooses to log in with the mailbox, otherwise it is not verified.

look at an example

If the form through the front-end JS to make a pre-judgment, and then through JS to post to the back-end script, the form form tag can not fill the action and method information.

Validate Initialization Section

The code is as follows	Copy Code
$ (document). Ready (function () { $ (' #form '). Validate ({//document loaded, initialize validate plugin Here to write validate initialization of some information, such as rules,messages, etc. }); });

Validate Verification, Submission section

The code is as follows	Copy Code
$ (' #form '). Submit (function () {//form validation when form is submitted if ($ (this). Valid () = = True) { $.post ({'./script.php '});/////////////////////////////// }else{ Alert (' validation failed '); } return false; This is important, return FALSE to block the HTML form action, so that all the form action to JS to handle. });

HTML form action, so that all the form action to JS to deal with. });

Never write return false, resulting in always a problem, such as alert () will flash, the background will record two submissions, and sometimes get given to the form page itself, etc. ...