欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年01月18日 16:37:46   作者：小程序-媛  
本篇文章主要介紹了jquery validate實現(xiàn)表單驗證 （正則表達式），用戶填寫表單時，可以快速地對用戶填寫的數(shù)據(jù)進行驗證，并做出反饋。有興趣的可以了解一下。

一、目的

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

二、validate插件簡介  

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

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

required:必填

minlength:最小長度

maxlength:最大長度

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

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

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

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

基本的校驗規(guī)則

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

validator對象

  • validator.form()驗證表單是否有效，返回true或者false;
  • validator.element(element)驗證表單中某個元素是否有效，返回true或者false;
  • validator.resetForm()把表單恢復到驗證前原來的狀態(tài)；
  • validator.showErrors(error)針對元素顯示特定的錯誤信息；
  • validator.numberOfInvalids()返回無效的元素數(shù)量；

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

  • jQuery.validator.addMethod()增加自定義的驗證方法;  （即$.validator.addMethod()）
  • jQuery.validator.format()格式化字符串，用參數(shù)代替模板中的｛n｝;
  • jQuery.validator.setDefaults()修改插件默認設(shè)計；
  • jQuery.validator.addClassRules()為某些包含名為name的class增加組合驗證類型。
$.validator.addClassRules({
  txt:{
    required:true,
    rangelength:[2,10]
  }
})//這時class="txt"的類都具備了這個兩個驗證規(guī)則

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

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

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

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

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

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

三、正則表達式

常用正則表達式：

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

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

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

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

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

手機號驗證：/^1[3,5,7,8]\d{9}$/

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論