Jquery.validate.js "Simple and practical Form validation Framework" "Advanced Edition"

This is the website of this plugin and I found a Chinese blog. (Although the plugin's name is Jquery.validte.js, the plugin's name is called jquery validation).

Basic usage can go to see Leng article or the above blog, I do not introduce in detail here.

First and foremost, all the fields to be validated are in the form, and the fields must have the name attribute.

For more information, please see the original link: http://www.gbtags.com/gb/share/5765.htm

1. Initialization of the default validate parameter:

This plug-in if you want to use, certainly a lot of pages will be used, after all, if there is a form, you need to verify. And the default language of this plugin is English, so we want to convert it into Chinese. We certainly do not want to write the message again on each page of JS. So we can initialize the default message in the common JS.

2. JQuery. Extend(jQuery. Validator. Messages, {
4. Required: "required field",
6. Remote: "Please fix this field",
8. Email: "Please enter the correct format of e-mail",
10. URL: "Please enter a valid URL",
12. Date: "Please enter a valid date",
14. Dateiso: "Please enter a valid date (ISO)." ,
16. Number: "Please enter a valid digit",
18. Digits: "can only enter integers",
20. CreditCard: "Please enter a valid credit card number",
22. Equalto: "Please enter the same value again",
24. Accept: "Please enter a string with a valid suffix name",
26. MaxLength: jQuery. Validator. Format("Enter a string with a maximum length of {0}"),
28. MinLength: jQuery. Validator. Format("Please enter a string with a minimum length of {0}"),
30. Rangelength: jQuery. Validator. Format("Please enter a string between {0} and {1}"),
32. Range: jQuery. Validator. Format("Please enter a value between {0} and {1}"),
34. Max: jQuery. Validator. Format("Enter a value of {0} max"),
36. Min: jQuery. Validator. Format("Please enter a value of {0} minimum")
38. });

At the same time, we can initialize some of the other parameters:

2. $. Validator. SetDefaults({
4. Errorclass: "Fielderror", //What class to add when wrong
6. Ignore: ". Ignore", //default to ignore validation of those domains
8. Ignoretitle: true,
10. onkeyup: false,
12. Errorplacement: function(error, element) {
14. //What to do if there is a mistake
16. },
18. Submithandler: function(form) {
20. //All verification through how to do
22. }
24. });

2. Add a validation rule

The validation rules are added in the form of a number of cold sub-articles before the article is introduced:

2. $("#form"). Validate({
4. Debug:True, //debug mode
6. Rules: {
8. Username: {
10. Required:true, //enable required fields
12. Rangelength: [3,] //Please enter a value between 3 and 10 bits
14. };
16. };
18. });

The above verification rules are written dead, such as required and rangelength are plug-in good rules, of course, these rules do not necessarily meet our requirements, so what should we do? Jquery.validation provides a way to add a custom rule: Addmethod:

2. $. Validator. Addmethod("Usernamecheck", function(value, element) {
4. return /^[0-9a-z_a-z]+$/. Test(value);
6. }, "Malformed user name");
10. $("form"). Validate({
12. Rules: {
14. Username: {
16. Required: true,
18. MinLength: 2,
20. MaxLength:
22. Usernamecheck: true
24. Remote: {
26. URL: "check_username.jhtml",
28. Cache: false
30. }
32. }
34. }
36. });

The above plugin verifies that the user name is required, length, whether the user name is legal (can also be verified with the built-in pattern), and uses Ajax to verify that the user name is duplicated or not.

sometimes , you may not have the same name, for example, you want to submit a set of data, your data format may look like this:

2. <input Type="Text" class="username" name="Member[0". Username " />
4. <input Type="Text" class="username" name="Member[1". Username " />
6. <input Type="Text" class="username" name="member[2 ].username " />
8. <input Type="Text" class="username" name="Member[3". Username " />
10. <input Type="Text" class="username" name="member[4 ].username " />

We certainly do not want to be in the rules of the 5 separate write verification rules, too wasted time, experience, then we can use the Addclassrules method, the same effect, the corresponding class.

2. $. Validator. Addclassrules({
4. Username: {
6. Required: true,
8. MinLength: 2,
10. MaxLength:
12. Usernamecheck: true
14. Remote: {
16. URL: "check_username.jhtml",
18. Cache: false
20. }
22. }
24. });
26. $("form"). Validate(); //Don't forget to initialize

3. What should I do if I verify the error?

Usually this plugin is left behind the authentication domain, if we are a row of the same name checkbox? Then he would put the error message behind the first checkbox, which would be ugly, and we would certainly like to put it behind the last checkbox, so we'll use the Errorplacement method:

2. $("form"). Validate({
4. Errorplacement: function(error, element) {
6. if(element). Is("input[type= ' checkbox ']")) {
8. Error. AppendTo($(element). Parent()); //Put the last one
10. } else {
12. $(element). After(error); //Put behind the wrong domain
14. }
16. }
18. });

4. The validation passed, and then what?

We can usually verify after passing, and do not want to submit the form directly, maybe we just use the form to verify, and then submit the form via Ajax, then we may use the Submithandler method:

1. $("form"). Validate({
2. Submithandler: function(form) {
3. //Verify success after doing something you want to do
4. Form. Submit(); //If you do not want to commit, return false.
5. }
6. });

5. How to pass JS Direct verification?

Sometimes, even if we do not edit this domain, we also want to verify that the domain is correct, then what to do? Use the valid () method. This method can function to a form, or to a domain, and at the same time, the True/false value is returned.

1. var v = $("input"). Valid();
2. var b = $("form"). Valid();

6. There are more features, not here, we can look at the above provided by the official website and blog address.

1. Code Demo:http://www.gbtags.com/gb/rtreplayerpreview/1140.htm

For more information, please see the original link: http://www.gbtags.com/gb/share/5765.htm

Jquery.validate.js "Simple and practical Form validation Framework" "Advanced Edition"