Introduction to the use of jQuery.Validate verification library_jquery

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">

<script><BR>$().ready(function() {<BR> $("#signupForm").validate();<BR>});<BR></script>

                                                                

E -Mail

< ;label for="password">Password

Confirm password

 

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:

<script><BR>$().ready(function() {<BR> $("#signupForm").validate({meta: "validate"});<BR>});<BR></script>

                                                                

E-Mail

Password label>

> ;

Confirm password

 

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:

<script><BR>$().ready(function() {<BR>  $.metadata.setType("attr", "validate");<BR>  $("#signupForm").validate();<BR>});<BR></script>

   

        Firstname
   
 

  E-Mail
 
 

 

  Password
 
 

 

  确认密码
 
 

   

       
   

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

正确写法：

复制代码 代码如下:

错误写法：

复制代码 代码如下:

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

复制代码 代码如下:

<script><BR>$().ready(function() {<BR>  $("#signupForm").validate({<BR>    rules:<BR>    {<BR>      firstname: "required",<BR>      email:<BR>      {<BR>        required: true,<BR>        email: true<BR>      },<BR>      password:<BR>      {<BR>        required: true,<BR>        minlength: 5<BR>      },<BR>      confirm_password:<BR>      {<BR>        required: true,<BR>        minlength: 5,<BR>        equalTo: "#password"<BR>      }<BR>    },<BR>    messages:<BR>    {<BR>      firstname: "请输入姓名",<BR>      email:<BR>      {<BR>        required: "请输入Email地址",<BR>        email: "请输入正确的email地址"<BR>      },<BR>      password:<BR>      {<BR>        required: "请输入密码",<BR>        minlength: jQuery.format("密码不能小于{0}个字符")<BR>      },<BR>      confirm_password:<BR>      {<BR>        required: "请输入确认密码",<BR>        minlength: "确认密码不能小于5个字符",<BR>        equalTo: "两次输入密码不一致不一致"<BR>      }<BR>    }<BR>  });<BR>});<BR>//messages处，如果某个控件没有message，将调用默认的信息<BR></script>

   

        Firstname
       
   

 

  E-Mail
 
 

 

  Password
 
 

 

  确认密码
 
 

   

       
   

required:true 必须有值

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

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

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

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

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

复制代码 代码如下:

<script><BR>$().ready(function() {<BR>  $("#signupForm").validate({<BR>    rules:<BR>    {<BR>      firstname: "required",<BR>      email:<BR>      {<BR>        required: "#open:checked",<BR>        email: true<BR>      }<BR>    },<BR>    messages:<BR>    {<BR>      firstname: "请输入姓名",<BR>      email:<BR>      {<BR>        required: "请输入Email地址",<BR>        email: "请输入正确的email地址"<BR>      }<BR>    }<BR>  });<BR>});<BR>//messages处，如果某个控件没有message，将调用默认的信息<BR></script>

   

        开关：
       
        打开
       
        关闭
   

   

      E-Mail
     
   

   

       
   

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

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

复制代码 代码如下:

<script><BR>$().ready(function() {<BR>  $("#signupForm").validate({<BR>    rules:<BR>    {<BR>      firstname: "required",<BR>      email:<BR>      {<BR>        required: function()<BR>        {<BR>          return true;<BR>        },<BR>        email: function()<BR>        {<BR>          return false;<BR>        }<BR>      }<BR>    },<BR>    messages:<BR>    {<BR>      firstname: "请输入姓名",<BR>      email:<BR>      {<BR>        required: "请输入Email地址",<BR>        email: "请输入正确的email地址"<BR>      }<BR>    }<BR>  });<BR>});<BR>//messages处，如果某个控件没有message，将调用默认的信息<BR></script>

   

        开关：
       
        打开
       
        关闭
   

   

      E-Mail
     
   

   

       
   

经过测试得知，即使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: