快捷導(dǎo)航

詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式）

更新時(shí)間：2017年01月18日 16:37:46 作者：小程序-媛

本篇文章主要介紹了jquery validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式），用戶填寫表單時(shí)，可以快速地對(duì)用戶填寫的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。有興趣的可以了解一下。

一、目的

為了更好地實(shí)現(xiàn)人機(jī)交互，使用jQuery封裝庫中的validate插件，在用戶填寫表單時(shí)，可以快速地對(duì)用戶填寫的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。

二、validate插件簡(jiǎn)介

validate()是插件的核心方法，定義了基本的校驗(yàn)規(guī)則和一些有用的配置項(xiàng)。

rule:設(shè)置表單的驗(yàn)證規(guī)則；
messages:設(shè)置表單不符合驗(yàn)證規(guī)則的提示信息；
debug:如果這個(gè)參數(shù)為true,那么表單還會(huì)提交，只進(jìn)行檢查，調(diào)試時(shí)十分方便。

required:必填

minlength:最小長(zhǎng)度

maxlength:最大長(zhǎng)度

rangelength:長(zhǎng)度范圍，以數(shù)組呈現(xiàn)[2，10]，表示表單輸入長(zhǎng)度為2到10位

remote:可以通過發(fā)現(xiàn)GET或者POST請(qǐng)求進(jìn)行遠(yuǎn)程驗(yàn)證，與Ajax的驗(yàn)證進(jìn)行比較。就是通過ajax實(shí)現(xiàn)的
｛
    url:
    type:默認(rèn)為GET請(qǐng)求
    data:發(fā)送的數(shù)據(jù)
｝

發(fā)送GET請(qǐng)求例子：

check:{
          required:true,
          remote:{
            url:"__CONTROLLER__/check?check="+$("#icode").val
            //__CONTROLLER__表示當(dāng)前控制器
          }
        }

基本的校驗(yàn)規(guī)則

序號(hào)	規(guī)則	描述
1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網(wǎng)址。
5	date:true	必須輸入正確格式的日期。日期校驗(yàn) ie6 出錯(cuò)，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗(yàn)證格式，不驗(yàn)證有效性。
7	number:true	必須輸入合法的數(shù)字（負(fù)數(shù)，小數(shù)）。
8	digits:true	必須輸入整數(shù)。
9	creditcard:	必須輸入合法的信用卡號(hào)。
10	equalTo:"#field"	輸入值必須和 #field 相同。
11	accept:	輸入擁有合法后綴名的字符串（上傳文件的后綴）。
12	maxlength:5	輸入長(zhǎng)度最多是 5 的字符串（漢字算一個(gè)字符）。
13	minlength:10	輸入長(zhǎng)度最小是 10 的字符串（漢字算一個(gè)字符）。
14	rangelength:[5,10]	輸入長(zhǎng)度必須介于 5 和 10 之間的字符串（漢字算一個(gè)字符）。
15	range:[5,10]	輸入值必須介于 5 和 10 之間。
16	max:5	輸入值不能大于 5。
17	min:10	輸入值不能小于 10。

validator對(duì)象

validator.form()驗(yàn)證表單是否有效，返回true或者false;
validator.element(element)驗(yàn)證表單中某個(gè)元素是否有效，返回true或者false;
validator.resetForm()把表單恢復(fù)到驗(yàn)證前原來的狀態(tài)；
validator.showErrors(error)針對(duì)元素顯示特定的錯(cuò)誤信息；
validator.numberOfInvalids()返回?zé)o效的元素?cái)?shù)量；

validator對(duì)象的靜態(tài)方法

jQuery.validator.addMethod()增加自定義的驗(yàn)證方法; （即$.validator.addMethod()）
jQuery.validator.format()格式化字符串，用參數(shù)代替模板中的｛n｝;
jQuery.validator.setDefaults()修改插件默認(rèn)設(shè)計(jì)；
jQuery.validator.addClassRules()為某些包含名為name的class增加組合驗(yàn)證類型。

$.validator.addClassRules({
  txt:{
    required:true,
    rangelength:[2,10]
  }
})//這時(shí)class="txt"的類都具備了這個(gè)兩個(gè)驗(yàn)證規(guī)則

獲取表單元素的驗(yàn)證規(guī)則：

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

為表單元素添加驗(yàn)證規(guī)則：

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

為表單元素刪除驗(yàn)證規(guī)則：

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

三、正則表達(dá)式

常用正則表達(dá)式：

用戶名的正則表達(dá)式驗(yàn)證：/^[\w\u4e00-\u9fa5]{2,10}/g(含漢字)

用戶名驗(yàn)證：/^\w{2,10}$/(不含漢字，只允許英文字母、數(shù)字和下畫線，長(zhǎng)度為2-10位)

QQ號(hào)驗(yàn)證:/^[1,9][0,9]{4,19}$/（第一位數(shù)字不為0，5-19位數(shù)字）

郵箱驗(yàn)證：/^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i(不區(qū)分大小寫)

密碼驗(yàn)證：/^\w{6,16}$/(只允許6-16位英文字母、數(shù)字和下畫線)

手機(jī)號(hào)驗(yàn)證：/^1[3,5,7,8]\d{9}$/

URL驗(yàn)證：/^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__表示當(dāng)前控制器 
          //dataType:"json", 
        //} 
      } 
    }, 
    messages:{ 
      admin_name:{ 
        required:"*必填！", 
        rangelength:"*長(zhǎng)度為2到10位！", 
      }, 
      name:{ 
        required:"*必填！", 
      }, 
      admin_pwd:{ 
        required:"*必填！", 
        rangelength:"*長(zhǎng)度為6到16位！", 
      }, 
      con_pwd:{ 
        required:"*必填！", 
        equalTo:"*兩次輸入的密碼不一致！" 
      }, 
      email:{ 
        required:"*必填！", 
        email:"*請(qǐng)輸入正確的郵箱！", 
      }, 
      qq:{ 
        required:"*必填！", 
      }, 
      s_page:{ 
        url:"*請(qǐng)輸入正確的網(wǎng)頁地址！", 
      }, 
      check:{ 
        required:"*必填！", 
        remote:"*驗(yàn)證碼有誤！", 
      }, 
    }, 
    //是否在獲取焦點(diǎn)時(shí)驗(yàn)證 
    //onfocusout:false, 
    //是否在敲擊鍵盤時(shí)驗(yàn)證 
    //onkeyup:false, 
    //提交表單后，（第一個(gè)）未通過驗(yàn)證的表單獲得焦點(diǎn) 
    focusInvalid:true, 
    //當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示 
    focusCleanup:true, 
  }); 
   
  //自定義正則表達(dá)示驗(yàn)證方法 
  $.validator.addMethod("checkQQ",function(value,element,params){ 
      var checkQQ = /^[1-9][0-9]{4,19}$/; 
      return this.optional(element)||(checkQQ.test(value)); 
    },"*請(qǐng)輸入正確的QQ號(hào)碼！"); 
     
  $.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)); 
    },"*請(qǐng)輸入正確的郵箱！"); 
     
  $.validator.addMethod("checkName",function(value,element,params){ 
      var checkName = /^\w{2,10}$/g; 
      return this.optional(element)||(checkName.test(value)); 
    },"*只允許2-10位英文字母、數(shù)字或者下畫線！"); 
   
  $.validator.addMethod("checkPwd",function(value,element,params){ 
      var checkPwd = /^\w{6,16}$/g; 
      return this.optional(element)||(checkPwd.test(value)); 
    },"*只允許6-16位英文字母、數(shù)字或者下畫線！"); 
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: