Of Stack

Detailed Explanation of jquery validate Implementation of Form Validation (Regular Expression)

  • 2021-07-12 05:02:25
  • OfStack

1. Purpose

In order to achieve better human-computer interaction, validate plug-in in jQuery encapsulation library is used to verify the data filled in by users quickly and give feedback when users fill in the form.

2. Introduction to the validate plug-in

validate () is the core method of the plug-in, defining basic validation rules and a few useful configuration items.

rule: Set validation rules for the form; messages: Set the prompt message that the form does not conform to the validation rule; debug: If this parameter is true, the form will be submitted, only for inspection, and 10 points is convenient for debugging.

required: Required

minlength: Minimum length

maxlength: Maximum length

rangelength: Length range, rendered as an array [2, 10], indicating that the form input length is 2 to 10 bits

remote: Remote authentication can be performed by discovering GET or POST requests, compared with Ajax authentication. Is implemented through ajax
{
url:
type: Default to GET request
data: Data sent
}

Example of sending GET request: 


check:{
          required:true,
          remote:{
            url:"__CONTROLLER__/check?check="+$("#icode").val
            //__CONTROLLER__ Represents the current controller 
          }
        }

Basic verification rules

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算1个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算1个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算1个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

validator Object

validator. form () Verifies that the form is valid and returns true or false; validator. element (element) Verifies that an element in the form is valid and returns true or false; validator. resetForm () restores the form to its original state before validation; validator. showErrors (error) displays specific error messages for elements; validator. numberOfInvalids () returns an invalid number of elements;

Static Methods of validator Objects

jQuery. validator. addMethod () adds a custom authentication method; (I. E. $. validator. addMethod ()) jQuery. validator. format () formats the string and replaces {n} in the template with parameters; jQuery. validator. setDefaults () modifies the plug-in default design; jQuery. validator. addClassRules () adds a combined authentication type to some class that includes an name. 

$.validator.addClassRules({
  txt:{
    required:true,
    rangelength:[2,10]
  }
})// At this time class="txt" Have these two validation rules for the class of

Gets the validation rule for the form element: 


$("#username").rules();

Add validation rules for form elements: 


$("#username").rules('add',rules);

Delete validation rules for form elements: 


 $("#username").rules('remove',rules);

3. Regular expressions

Common regular expressions:

Regular expression validation of user name:/^ [\ w\ u4e00-\ u9fa5] {2, 10}/g (including Chinese characters)

User name verification:/^\ w {2, 10} $/(excluding Chinese characters, only English letters, numbers and underscores are allowed, and the length is 2-10 digits)

QQ authentication:/^ [1, 9] [0, 9] {4, 19} $/(the first digit is not 0, 5-19 digits)

Mailbox authentication:/^ [a-z0-9] + @ ([a-z0-9] +\.) + [a-z] {2, 4} $/i (case insensitive)

Password authentication:/^\ w {6, 16} $/(only 6-16 English letters, numbers and underscores allowed)

Mobile phone number verification:/^ 1 [3, 5, 7, 8]\ d {9} $/

URL authentication:/^ http:\/\/[a-z\ d-] + (\ w\/) +) $/i 


$(document).ready(function(){ 
  $("#table").validate({ 
    rules:{ 
      admin_name:{ 
        required:true, 
        checkName:true, 
      }, 
      name:{ 
        required:true,          
      }, 
      admin_pwd:{ 
        required:true, 
        checkPwd:true, 
      }, 
      con_pwd:{ 
        required:true, 
        equalTo:admin_pwd, 
      }, 
      email:{ 
        required:true, 
        checkEmail:true, 
      }, 
      qq:{ 
        required:true, 
        checkQQ:true, 
      }, 
      s_page:{ 
        url:true, 
         
      }, 
      check:{ 
        //required:true, 
        //remote:{ 
          //url:"__CONTROLLER__/check?check="+$("#icode").val, 
          //__CONTROLLER__ Represents the current controller  
          //dataType:"json", 
        //} 
      } 
    }, 
    messages:{ 
      admin_name:{ 
        required:"* Required! ", 
        rangelength:"* The length is 2 To 10 Bit! ", 
      }, 
      name:{ 
        required:"* Required! ", 
      }, 
      admin_pwd:{ 
        required:"* Required! ", 
        rangelength:"* The length is 6 To 16 Bit! ", 
      }, 
      con_pwd:{ 
        required:"* Required! ", 
        equalTo:"* The password entered twice does not 1 To! " 
      }, 
      email:{ 
        required:"* Required! ", 
        email:"* Please enter the correct email address! ", 
      }, 
      qq:{ 
        required:"* Required! ", 
      }, 
      s_page:{ 
        url:"* Please enter the correct web address! ", 
      }, 
      check:{ 
        required:"* Required! ", 
        remote:"* The verification code is wrong! ", 
      }, 
    }, 
    // Validate when getting focus  
    //onfocusout:false, 
    // Whether to verify when typing the keyboard  
    //onkeyup:false, 
    // After submitting the form, the 1 Forms that fail to validate get focus  
    focusInvalid:true, 
    // Remove error prompts when elements that fail validation get focus  
    focusCleanup:true, 
  }); 
   
  // Custom Regular Representation Verification Method  
  $.validator.addMethod("checkQQ",function(value,element,params){ 
      var checkQQ = /^[1-9][0-9]{4,19}$/; 
      return this.optional(element)||(checkQQ.test(value)); 
    },"* Please enter the correct QQ Number! "); 
     
  $.validator.addMethod("checkEmail",function(value,element,params){ 
      var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i; 
      return this.optional(element)||(checkEmail.test(value)); 
    },"* Please enter the correct email address! "); 
     
  $.validator.addMethod("checkName",function(value,element,params){ 
      var checkName = /^\w{2,10}$/g; 
      return this.optional(element)||(checkName.test(value)); 
    },"* Allow only 2-10 English letters, numbers or underline! "); 
   
  $.validator.addMethod("checkPwd",function(value,element,params){ 
      var checkPwd = /^\w{6,16}$/g; 
      return this.optional(element)||(checkPwd.test(value)); 
    },"* Allow only 6-16 English letters, numbers or underline! "); 
});
Related articles: