easyui 進階之表單校驗、自定義校驗

前言

easyui是一種基於jQuery的用戶界面插件集合，它為創建現代化，互動，JavaScript應用程序，提供必要的功能，完美支持HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。

easyui中文網：http://www.jeasyui.net/

easyui官網：http://www.jeasyui.com/documentation/#

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

 

正文

一、從標記創建驗證框（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.動態傳參--傳入正則表達式，提示信息，參數等

（例子來自 javaloveiphone）

$.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>

 

 

三、正則表達式

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

正則表達式大全：https://www.cnblogs.com/clwydjgs/p/9366883.html

 

四、表單提交

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

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

 

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

作者：Dawnzhang 
出處：https://www.cnblogs.com/clwydjgs/p/9390488.html