前言

easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。

今天我們來學習表單校驗以及如何自定義表單校驗

正文

一、從標記建立驗證框（validatebox）。

1.郵箱校驗

a.標記方式建立驗證框：

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

b.使用 javascript 建立驗證框（validatebox）。

<input id="vv">
$('#vv').validatebox({
required: true,
validType: 'email'
});

2.設定必輸以及長度限制：

<input class="easyui-numberbox"  type="text" name="dispid" style="width: 625px" data-options="required:true,validType:'length[6,16]'" />

3、設定只能輸入數字

<input class="easyui-numberbox"  type="text" name="pid" style="width: 625px" data-options="required:true" />
 

4、設定日期並遮蔽手動輸入

<input class="easyui-datebox" id ="dispid" type="text" name="dispid" style="width: 625px" data-options="editable:false" />

二，自定義表單校驗方法

1、靜態傳參 --檢查兩次密碼是否相同。

檢查密碼和重新輸入密碼是相同的。

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: 'Field do not match.'
}
});
<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals['#pwd']">
 

2.動態傳參--傳入校驗的長度的數字引數

$.extend($.fn.validatebox.defaults.rules, {
    nameLength: {
        validator: function(value, param){
            //正則表示式需要動態傳遞引數，必須採用正則物件即構造器方式，傳入拼接了動態引數的字串的方式
            var re =new RegExp("^[\u4e00-\u9fa5]|[a-zA-Z0-9]{" + param[0]+ "," + param[1] + "}$");
            return re.test(value);
        },
        //提示資訊中也需要動態新增引數，此時獲取param中的引數方式為{0}、{1}，分別代表param[0]，param[1]
        message: "選單名稱長度要求為{0}-{1}位!"
    },
    pageValidata: {
        validator: function(value, param){
            //正則表示式需要動態傳遞引數，必須採用正則物件即構造器方式，傳入拼接了動態引數的字串的方式
           var m_reg = new RegExp("^[a-zA-Z0-9]{" + param[0]+ "," + param[1] + "}$");
            if (!m_reg.test(value)) {
                $.fn.validatebox.defaults.rules.pageValidata.message = "只能為{0}-{1}位英文或數字!";//動態設定message提示資訊，complexValid與方法名對應
                return false;
            }else {
                return true;
            }
        },
        //提示資訊中也需要動態新增引數，此時獲取param中的引數方式為{0}、{1}，分別代表param[0]，param[1]
        message: ""
    },
})

頁面呼叫

<input class="easyui-textbox" id ="iconCls" type="text" name="iconCls" style="width: 625px" data-options="validType:'pageValidata[2,16]',required:true" />
<input class="easyui-textbox" id ="name" type="text" name="name" style="width: 625px" data-options="validType:'nameLength[2,30]',required:true" />

3.動態傳參--傳入正則表示式，提示資訊，引數等

$.extend($.fn.validatebox.defaults.rules, {
   //五個引數：第一個是正則表示式，第二個是錯誤提示資訊，前兩個引數使用者合法性驗證；第三個是呼叫的url，第四個是傳遞給伺服器的引數名(引數key)，第五個是錯誤提示資訊，第六個引數是當前表單id欄位
    complexValid : {
       validator: function(value, param) {  
           var m_reg = new RegExp(param[0]); 
           if (!m_reg.test(value)) {  
               $.fn.validatebox.defaults.rules.complexValid.message = param[1];//動態設定message提示資訊，complexValid與方法名對應
               return false;  
           }  
           else {  
               var postdata = {};  
               postdata[param[3]] = value;  //動態的key和value對應
               postdata['id'] = $("#"+param[5]).val();//獲取id值
               var result = $.ajax({  
                   url: param[2],  //動態URL
                   data: postdata,
                   async:false,
                   type: "post"  
               }).responseText;
               if (result == "false") {
                   $.fn.validatebox.defaults.rules.complexValid.message = param[4];  //動態設定message提示資訊，complexValid與方法名對應
                   return false;  
               }  
               else {  
                   return true;  
               }  
           }  
       }, 
    message : "" 
    }
})

頁面呼叫

<input class="easyui-textbox" type="text" name="userCode" validType="complexValid['^[0-9a-zA-Z]+$','只能包含字母、數字','userCode','已被佔用,換一個試試!','userId']"></input>

三、正則表示式

自定義的表單校驗再加上正則表示式大全基本上可以覆蓋所有的校驗規則

四、表單提交

在提交表單前記得要校驗通過才能提交哦

$('#save').click(function(){
            if($('#form').form('validate')){
                //校驗通過
                $('#form').submit();
            }
        });

歡迎大家關注公眾號，不定時乾貨，只做有價值的輸出