成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

一、目的

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

二、validate插件簡介

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

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

required:必填

minlength:最小長度

maxlength:最大長度

rangelength:長度范圍，以數組呈現[2，10]，表示表單輸入長度為2到10位

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

發送GET請求例子：

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

基本的校驗規則

序號 規則 描述 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 的字符串（漢字算一個字符）。 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()把表單恢復到驗證前原來的狀態； validator.showErrors(error)針對元素顯示特定的錯誤信息； validator.numberOfInvalids()返回無效的元素數量；

validator對象的靜態方法

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

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

獲取表單元素的驗證規則：

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

為表單元素添加驗證規則：

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

為表單元素刪除驗證規則：

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

三、正則表達式

常用正則表達式：

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

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

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

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

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

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

URL驗證：/^http://[a-zd-]+(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:"*請輸入正確的網頁地址！", 
      }, 
      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位英文字母、數字或者下畫線！"); 
   
  $.validator.addMethod("checkPwd",function(value,element,params){ 
      var checkPwd = /^w{6,16}$/g; 
      return this.optional(element)||(checkPwd.test(value)); 
    },"*只允許6-16位英文字母、數字或者下畫線！"); 
}); 

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網。

jquery