Introduction to the use of jQuery.Validate verification library

jQuery.Validate verification library
1. Download jquery.validate, here I provide jquery-validation-1.9.0, click to download

Default validation rules

Copy code The code is as follows:

(1)required:true           Required fields
(2)remote:"check.php"                                                                                                                                                                                                              but  🎜>(4)url:true You must enter the URL in the correct format
(5)date:true You must enter the date in the correct format
(6)dateISO:true You must enter the date (ISO) in the correct format, for example: 2009-06-23, 1998/01/22 Only verify the format, not the validity
(7)number:true You must enter legal numbers (negative numbers, decimals)
(8)digits:true You must enter an integer 
(9)creditcard: You must enter a legal credit card number
(10)equalTo:"#field" The input value must be the same as #field
(11)accept: Enter a string with a legal suffix ( Suffix of the uploaded file) 
(12)maxlength:5 Enter a string with a maximum length of 5 (Chinese characters count as one character) 
(13)minlength:10 Enter a string with a minimum length of 10 (Chinese characters count as one character) )
(14)rangelength:[5,10] Input a string whose length must be between 5 and 10") (Chinese characters count as one character)
(15)range:[5,10] Input value Must be between 5 and 10
(16)max:5 The input value cannot be greater than 5
(17)min:10 The input value cannot be less than 10


Default prompt

Copy code The code is as follows:

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 gumeltiges 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 less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

If you need to modify it, save the following js code as: messages_cn.js and quote it on the page:

Copy the code The code is as follows:

Copy code The code is as follows:

jQuery.extend(jQuery.validator.messages, {
 required : "Required field",
 remote: "Please correct this field",
 email: "Please enter a correct email format",
 url: "Please enter a legal URL",
 date: "Please enter a legal date",
 dateISO: "Please enter a legal date (ISO).",
 number: "Please enter a legal number",
 digits: "Only integers can be entered ",
 creditcard: "Please enter a legal credit card number",
 equalTo: "Please enter the same value again",
 accept: "Please enter a string with a legal suffix",
 maxlength: jQuery.validator.format("Please enter a string with a length of at least {0}"),
 minlength: jQuery.validator.format("Please enter a string with a length of at least {0}") ,
 rangelength: jQuery.validator.format("Please enter a string with a length between {0} and {1}"),
 range: jQuery.validator.format("Please enter a length between A value between {0} and {1}"),
 max: jQuery.validator.format("Please enter a value up to {0}"),
 min: jQuery.validator.format ("Please enter a minimum value of {0}")
});

Usage method
1. Write the verification rules into the control

Copy code The code is as follows:

< ;script language="JavaScript" type="text/JavaScript" src="jquery.validate.min.js">

Use class="{} " method, you must introduce the package: jquery.metadata.js

You can use the following method to modify the prompt content

Copy the code The code is as follows:

 The above code means: If the firstname field does not fill in any content, it will prompt: Please enter the content. So, if the length of the filled-in content is less than 5, how should the user be prompted to write? Please look at the code below: 

Copy the code The code is as follows:

Note: When using the equalTo keyword, the following content must be enclosed in quotation marks, as shown in the following code:

Copy code The code is as follows:

class="{required:true,minlength:5,equalTo:'#password'}"

Another way, use the keyword: meta

For example, change the code in the above example to the keyword meta form, the code is as follows:

Copy the code The code is as follows:

Note:

The rules section applies the full form as follows:

Correct writing:

Copy code The code is as follows:

Incorrect writing:

Copy code The code is as follows:

There is another way

Copy the code The code is as follows:

$.metadata.setType("attr", "validate");

This way you can use validate="{required:true}", or class="required ", but class="{required:true,minlength:5}" will not work 

For example, change the above example code to:

Copy the code The code is as follows:

注意：规则部分应用完整形式，即

正确写法：

复制代码代码如下:

错误写法：

复制代码代码如下:

2、将校验规则写到代码中

复制代码代码如下:

required:true 必须有值

required:"#aa:checked"id名称为aa的dom被选中时，则需要验证

required:function(){} 返回为真，表示需要验证（仅针对required有效，其它无效。）

后边两种常用于，表单中需要同时填或不填的元素

下面针对上面三项内容，通过实例来说明一下，更易于理解。（第一个说明：required:true 必须有值这项就不在举例了，通过上面的示例，已经非常清楚。）

required:"#aa:checked" 的示例如下：

复制代码代码如下:

当选中“打开”时，则对email进行验证。

required:function(){}的示例如下：

复制代码代码如下:

经过测试得知，即使email:function(){return false}); 是返回false，但是required:function(){return true;}，是返回true，那么，除了验证是否为空外，还验证email格式。也就是说email:function(){reuturn false;}设置无效。进一步测试，去掉required:function(){return true;}，只保留：email:function(){reuturn false;}，仍然验证email格式。代码如下：

复制代码代码如下:

  $("#signupForm").validate({
    rules:
    {
      firstname: "required",
      email:
      {
        email: function()
        {
          return false;
        }
      }
    },
    messages:
    ......

注意：将校验规则单独写在文件中，如上面例子中的rules规则中的firstname，email等，问题是，在input中有id，又有name属性，那JQuery Validation获取哪个呢？通过测试，是获取name属性的。所以，rules中的key，是input的name属性值，而不是id属性值。

定义样式代码

复制代码代码如下:

/* jQuery.Validate css */
input.error{border: 1px dotted red;}
label.error{
  background-image:url('del.gif');
  background-repeat:no-repeat;
  padding-left:18px;
  color: red;
}

input.error defines the style of the input control

label.error defines the style of the error message

As shown below:

Introduction to the use of jQuery.Validate verification library_jquery