Home >Web Front-end >JS Tutorial >Introduction to the use of jQuery.Validate verification library_jquery

Introduction to the use of jQuery.Validate verification library_jquery

WBOYOriginal: 2016-05-16 17:35:141059browse

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:

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript calculates the distance between two markers (Google Map V3)_javascript skillsNext article：Javascript calculates the distance between two markers (Google Map V3)_javascript skills

See more

Introduction to the use of jQuery.Validate verification library_jquery

Related articles