jquery中validate如何實現表單驗證

這篇文章主要介紹了jquery中validate如何實現表單驗證，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、目的

為了更好地實現人機交互，使用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__表示當前控制器
          }
        }

基本的校驗規則

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);

三、正則表達式

常用正則表達式：

用戶名的正則表達式驗證：/^[\w\u4e00-\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-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:"*請輸入正確的網頁地址！", 
      }, 
      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中validate如何實現表單驗證”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!