Quickly learn jQuery plug-in. How to use jquery.validate.js form validation plug-in_jquery

The most common occasion for using JavaScript is form validation, and jQuery, as an excellent JavaScript library, also provides an excellent form validation plug-in----Validation. Validation is one of the oldest jQuery plug-ins, has been verified by different projects around the world, and has been praised by many web developers. As a standard verification method library, Validation has the following characteristics:

• 1. Built-in verification rules: There are 19 types of built-in verification rules such as required, numbers, emails, URLs and credit card numbers
• 2. Customized verification rules: Verification rules can be easily customized
• 3. Simple and powerful verification information prompt: Verification information prompt is provided by default, and provides the function of customizing the default prompt information
• 4. Real-time verification: Verification may be triggered through keyup or blur events, not just when the form is submitted

Usage:
1. Introduce jQuery library and Validation plug-in

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> 
<script src="scripts/jquery.validate.js" type="text/javascript"></script> 

2. Determine which form needs to be verified

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  $("#commentForm").validate(); 
}); 
//]]> 
</script> 

3. Encode verification rules for different fields and set the corresponding attributes of the fields

class="required"  必须填写 
class="required email"    必须填写且内容符合Email格式验证 
class="url"       符合URL格式验证 
minlength="2"   最小长度为2 

There are 19 types of verifiable rules:
required: Required field
remote:     "Please correct this field",
email:                                                                                                                               url: URL verification
date: Date verification dateISO: Date (ISO) verification
dateDE:
number: Number verification
numberDE:
digits:                                                                                                                                                                               
creditcard:
Credit card number verification
equalTo: “Please enter the same value again” verification
accept:  String verification with legal suffix name
maxlength/minlength: Maximum/minimum length verification
rangelength: String length range verification
range:                                                                                                                                 max/min:                                                                   Another verification method (write all verification-related information into class attributes for easy management)
1). Introduce a new jQuery plug-in
---jquery.metadata.js (jQuery plug-in that supports fixed format parsing)

Copy code The code is as follows:

2). Change the verification method called

3). Write all verification rules into the class attribute

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  //将$("#commentForm").validate(); 改成 
  $("#commentForm").validate({meta: "validate"}); 
}); 
//]]> 
</script> 

You can also use the name attribute to associate fields and verification rules (the verification behavior is completely decoupled from the HTML structure)

class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" 
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"    

Internationalization

The default language of the verification information of the Validation plug-in is English. If you want to change it to Chinese, you only need to import the Chinese verification information provided by Validation. The import code is as follows:

$("#commentForm").validate({ 
  rules: { 
   username: { 
     required: true, 
     minlength: 2 
   }, 
   email: { 
     required: true, 
     email: true 
   }, 
   url:"url", 
   comment: "required" 
  }, 
  messages: { 
   username: { 
     required: '请输入姓名', 
     minlength: '请至少输入两个字符' 
   }, 
   email: { 
     required: '请输入电子邮件', 
     email: '请检查电子邮件的格式' 
   }, 
   url: '请检查网址的格式', 
   comment: '请输入您的评论' 
  } 
}); 

Copy code
The code is as follows:

Customize verification information and beautify it

Custom validation rules

errorElement: "em",        //可以用其他标签，记住把样式也对应修改 
success: function(label) {  //label指向上面那个错误提示信息标签em 
   label.text("")            //清空错误提示消息 
       .addClass("success");  //加上自定义的success类 
   } 
在CSS中添加样式与之关联 
em.error { 
   background:url("images/unchecked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 
em.success { 
   background:url("images/checked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 

The above is a detailed introduction to the form validation plug-in jquery.validate.js. I hope it will be helpful to everyone’s learning.