Introduction to basic usage of jquery.validate.js

Jquery.validate.js is a verification plugin under jquery, the function is relatively powerful, has long been heard but one has not been used, now is to be able to study it.

Here reproduced an article written by predecessors, in my own understanding of the revised, only for record.

First put the code of a large domestic company:

JavaScript code

2. <script type= "text JavaScript" = "" >
6. function lang (key) {
8. Mylang = {
12. ' Ls_input_myb ': ' Please enter your account ',
14. ' Ls_myb_email ': ' Roaming currency account is an email address ',
16. ' Ls_login_password ': ' Please enter your login password ',
18. ' Ls_password_length ': ' Password length is between {0}-{1} bits ',
20. ' Ls_input_captcha ': ' Please enter the verification code ',
22. ' Ls_captcha_length ': ' The length of the verification code is {0} bits ',
24. ' Ls_account_email ': ' Account name is email address ',
28. ”:”
30. };
34. return Mylang[key];
36. }
40. "Script"
44. <script type= "text JavaScript" = "" >
46. $ (document). Ready (function () {
50. $ ("#loginForm"). Validate ({
52. Rules: {
54. Uemail: {
56. Required:true,
58. Email:true
60. },
62. Upassword: {
64. Required:true,
66. Rangelength: [6, 30]
68. }
70. },
72. Messages: {
74. Uemail: {
76. Required:lang (' Ls_input_myb '),
78. Email:lang (' Ls_myb_email ')
80. },
82. Upassword: {
84. Required:lang (' Ls_login_password '),
86. Rangelength: $.format (Lang (' Ls_password_length '))
88. }
90. },
92. Errorplacement:function (Error, Element) {
94. var placement = $ (element.parent ("TD"). Parent ("TR"). Next ("tr"). Find ("TD"). Get (1));
96. Placement.text (");
98. Error.appendto (placement);
100. },
102. Onkeyup:false
104. });
108. var accounttipstext = lang (' Ls_account_email ');
110. $ ("#uEmail"). focus (function () {
112. if (!$ (). Parent (). Parent (). Next (). Find (' TD '). Get (1)). Text ()) {
114. $ (this). Parent (). Parent (). Next (). Find (' TD '). Get (1)). HTML (' <span class= ' font_888_8″> ' + Accounttipstext + ' );
116. }
118. $ (this). CSS (' color ', ' #000 ');
120. }). focus ();
128. });
132. "Script"

I just started with this example, in fact this example almost contains the essence of jquery.validate.js, if you fully understand the code is basically a primer.

Think of the past to do the online simulation of the Futures Web page when they write their own code to judge, the real naïve dead ...

The following is a complete article introduction.

Default validation rules
(1) Required:true must lose field
(2) Remote: "check.php" using Ajax method call check.php Validate input value
(3) Email:true must enter the correct format of e-mail
(4) Url:true must enter the correct format of the URL
(5) Date:true must enter the correct format date
(6) Dateiso:true must enter the correct format for 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, fractional)
(8) Digits:true must enter an integer
(9) CreditCard: Must enter a valid credit card number
Equalto: The "#field" input value must be the same as #field
(one) Accept: Enter a string with a valid suffix (the suffix of the uploaded file)
Maxlength:5 input string with a maximum length of 5 (Chinese characters are counted as one character)
(minlength:10) Enter a string with a minimum length of 10 (Chinese characters are counted as one character)
(rangelength:[5,10] Enter a string that must be between 5 and 10 in length) (Chinese characters are counted as one character)
(range:[5,10] 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
The default hints
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).",
Datede: "Bitte geben Sie ein G eyebrow ltiges Datum ein.",
Number: "Please enter a valid number.",
Numberde: "Bitte geben Sie eine Nummer ein.",
Digits: "Please enter only digits",
CreditCard: "Please enter a valid credit card number.",
Equalto: "Please enter the same value again.",
Accept: "Please enter a value with a valid extension.",
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 of less than or equal to {0}."),
Min: $.validator.format ("Please enter a value greater than or equal to {0}.")
},
If you need to modify, you can add in the JS code:
Jquery.extend (JQuery.validator.messages, {
Required: "Required field",
Remote: "Please fix this field",
Email: "Please enter the correct format of e-mail",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter a valid digit",
Digits: "Can only enter integers",
CreditCard: "Please enter a valid credit card number",
Equalto: "Please enter the same value again",
Accept: "Please enter a string with a valid suffix name",
Maxlength:jQuery.validator.format ("Please enter a string with a maximum length of {0}"),
Minlength:jQuery.validator.format ("Please enter a string with a minimum length of {0}"),
Rangelength:jQuery.validator.format ("Please enter a string between {0} and {1}"),
Range:jQuery.validator.format ("Please enter a value between {0} and {1}"),
Max:jQuery.validator.format ("Please enter a value of {0} max"),
Min:jQuery.validator.format ("Please enter a value of minimum {0}")
});
Recommended practice, put this file into messages_cn.js and introduce it in the page

CLS CC NET Investment International

Go to http://www.php1.cn/detail/jquery-validate-js_DeJiBenYongFaRuMen.html

Introduction to basic usage of jquery.validate.js