JQuery Validate preliminary Experience (i) _jquery

JQuery is a fast, simple JavaScript library that simplifies the traversing of HTML files, event handling, animation, Ajax interaction, and thus facilitates the rapid development of Web-page production. JQuery is designed to change the way you write JavaScript.

The JQuery Validate plug-in provides a powerful validation feature for forms, making it easier for client form validation to be validated.

But in the process of learning, I also encountered doubts, many of the online examples are seemingly dependent on jquery.metadata.js this library, and then in the label as class= "required remote" form, class itself is rendering style, Now attached to the various calibration rules, it looks a bit messy. If you don't rely on jquery.metadata.js, then how to write.

1, only the introduction of Jquery.js (specific version of their own choice) and Jquery.validate.js

<! DOCTYPE html>  

It turns out that just introducing the top two JS files can also accomplish simple form validation.

2, but because the default hint information is in English, in order to have a friendly hint, so, the next thing to do is to let the hint information displayed into Chinese.

Method One, customize the hint information through JavaScript.

<! DOCTYPE html>  

First, here is a method call: $ ("#registerForm"). Validate ([options]), which is used to validate the selected form, the parameter of the method is optional, you can enter 0 or more key value pairs (Key/value), This approach is for example: Submit, Focus, KeyUp, Blur, click Trigger Validation, object is the element of the entire form, or a single element, using the rules and messages to define the validated elements, using Errorclass, error Element, wrapper, Errorlabelcontainer, Errorcontainer, ShowErrors, Success, Errorplacement, highlight, Unhighlight, Ignoretitle to control the error message display of illegal elements. The rules can also enter 0 or more key-value pairs, and his key corresponds to the element's name attribute value, such as Username,confirmpassword, and so on. And his value is some validation rules. Messages as rules can enter 0 or more key-value pairs, his key is also the corresponding element of the name attribute value, and his value is the validation error of the hint information. In short, the method for defining validation rules in rules{}. The error output is defined in messages{}.

One thing that needs to be noted here is Equalto: "#cpassword", where value in the key pair is the ID value of the element (if you notice the # you should be aware).

By writing the above, you can customize the cue message. Maybe you have a question, do I have to customize the message every time I validate the form? Of course not, you can also Ctrl C+ctrl V. Of course it's a joke ... However, the next method will solve your question.

Method Two, custom a hint information, and then save into a JS file. Take him as a template and then introduce it directly on the page you need. I downloaded a copy from the Internet.

 (function (factory) {if (typeof define = = "function" && define.amd) {Defin E (["jquery", "..
 /jquery.validate "], factory);
 else {factory (jQuery);
 } (function ($) {/* translated default messages for the JQuery validation plugin. 
 * LOCALE:ZH (Chinese, Chinese (zhōngwén), Chinese, Hans) * * $.extend ($.validator.messages, {required: "This is a required field", 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 (YYYY-MM-DD)", Number: "Please enter a valid numbers", Dig Its: "Only enter the number", CreditCard: "Please enter a valid credit card number", Equalto: "Your input is not the same", extension: "Please enter a valid suffix", maxlength: $.validator.format ("Max Can enter {0} characters "), MinLength: $.validator.format (" At least {0} characters "), Rangelength: $.validator.format (" Please enter a string between {0} to {1} ") "), Range: $.validator.format (" Please enter a value between {0} to {1} "), Max: $.validator.format (" Please enter a value not greater than {0} "), min: $.validator.fo
Rmat ("Please enter a value not less than {0}")}); })); 

The code for the

page is almost exactly the same as the jv1.html, but one more JS file is introduced.

<! DOCTYPE html>  

Method One and method two are not mutually exclusive, both methods can be used in combination. You can use method two to save a more general template, and then use the method to customize the prompts as specified.

The above is what I learned this afternoon of the harvest. It is said that in the new version, there is a new writing, neither need to rely on the Jquery.metadata.js library mentioned above, nor need to customize the hint information through JavaScript, but in the label to data-rule-validation rules, data-msg-hint information This format is redefined. Eager......

The following is the default checksum rule provided by the official website.

(1) Required:true must be lost field
(2) Remote: "check.php" use Ajax method to invoke check.php validate input value
(3) Email:true must enter the correct format email
(4) Url:true must enter the URL in the correct format
(5) Date:true must enter a date in the correct format
(6) Dateiso:true must enter the correct format of 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, decimal)
(8) Digits:true must enter an integer
(9) CreditCard: Must enter the legal credit card number
(a) Equalto: "#field" input value must be the same as #field
(one) Accept: Enter a string with a valid suffix name (the suffix of the uploaded file)
(Maxlength:5) A string with a maximum of 5 input length (Chinese characters are counted as one character)
(Minlength:10) A string with a minimum input length of 10 (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

Well, groping for nearly two hours, my first essay to this is completed. At the same time hope to bring inspiration to everyone.

The next article introduces jquery Validate initial experience (ii), study together.