對easyui-validatebox的驗證類型的擴展

 

　　easyui為我們提供了validatebox類型的組件，使用它可以完成自動驗證，十分方便。要注意的是，easyui中的各個組件都是有繼承關系的。通過查看api，textbox繼承validatebox，而其他的組件類型又直接或間接的繼承textbox，所以，只要使用了easyui form插件中的一類，那么自然的我們就能使用它的驗證框架。

一.自帶驗證類型

　　easyui-validatebox為我們提供了基本的驗證，有五種，分別為required、email、url、length[0,100]、remote['http://.../action.do','paramName']。

<input type="text" name="a" class="easyui-validatebox" data-options="required:true">
<input type="text" name="b" class="easyui-validatebox" data-options="required:true,validType:'email'">
<input type="text" name="c" class="easyui-validatebox" data-options="required:true,validType:length[6,9]">
<!-- easyui 1.3.2以后可用 -->
<input type="text" name="d" class="easyui-validatebox" data-options="required:true,validType:['email','length[6,9]']">
<!-- remote類型就不演示了，因為它本質上是ajax驗證，但ajax一般是要有特殊處理的，大家自己調用ajax進行驗證就好 -->

 　　這樣來看easyui-validatebox是不是使用起來非常簡單呢？不過，它只為我們提供了比較基礎的驗證類型， 如果有更多的要求，我們就需要自己自定義驗證類型了。

二.自定義驗證類型：

1.api提供的自定義驗證類型

$.extend($.fn.validatebox.defaults.rules, {
    //驗證兩個輸入框相等
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Field do not match.'
    },
    //輸入的最小長度
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

<!-- 驗證兩次輸入的密碼是否相等 -->
<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']">
<!-- 驗證輸入字段的最小長度 -->
<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

　　當我們定義完了自定義驗證類型后，就可以像easyui提供給我們的類型一樣去使用了。

　　注意看equals['#pwd']傳入的是id，而minLength[5]傳入的是數值，這個具體的要看內部實現。“validator:function(value, param){}”中param是數組類型。

　　這里要補充一下，其實easyui本質上是jquery的插件，而我們的自定義類型，就是對jquery插件方法的擴展。更多關於jquery插件的問題，可以查閱其他的資料，當然，以后我也會對其進行總結的。

2.更多的自定義類型

/*
 * 比較兩個日期的大小
 * 傳入的參數推薦是"yyyy-mm-dd"的格式，其他的日期格式也可以，但要保證一致
 */
var dateCompare = function(date1, date2){
    if(date1 && date2){
        var a = new Date(date1);
        var b = new Date(date2);
        return a < b;
    }
}

/*
 * 對easyui-validatebox的驗證類型的擴展
 */
$.extend($.fn.validatebox.defaults.rules, {
    //手機號碼
    mobile: {
        validator: function(value, param){
            return /^0{0,1}1[3,8,5][0-9]{9}$/.test(value);
        },
        message: "手機號碼格式不正確"
    },
    //身份證
    IDCard: {
        validator: function(value, param){
            return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
        },
        message: "請輸入正確的身份證號碼"
    },
    //比較時間選擇器
    compareDate: {
        validator: function(value, param){
            return dateCompare($(param[0]).datetimebox("getValue"), value);
        },
        message: "結束日期不能小於開始日期"
    }
});

　　這里也只列舉了幾個比較常用的自定義類型，未來還會繼續對其進行補充。

三.總結

　　easyui-validatebox是一個比較輕便的驗證框架，但它同時又支持對其自定義，所以功能也非常強大。其實在自定義驗證類型的過程中，我覺得最重要的反而是正則表達式的知識。

四.補充列表

　　《對easyui-validatebox的驗證類型的擴展--補充》增加了更多的自定義類型，2016-06-03