1. 程式人生 > >寫了幾個實用的JS函式,記錄下。

寫了幾個實用的JS函式,記錄下。

將自定義函式擴充套件至jQuery的函式空間內

(function($){
    //可以使用$('選擇器').[函式名]呼叫
    $.fn.[函式名]=function() {
        //函式內容
    };

    //可以使用$.[函式名]呼叫
    $.[函式名]=function() {
        //函式內容
    };
})(jQuery);

序列化表單-用於提交表單

$.fn.serializeForm2JsObj=function() {  
    var serializeObj={};  
    var array=this.serializeArray();  
    $(array).each(function
(){
if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this
.name]=this.value; } }); return serializeObj; };

使用示例

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

可以看到表單內的input標籤的name屬性被序列化成一個JS物件的屬性了,那麼這個怎麼用呢。我們直接將此JS物件提交到SpringMVC的後臺

這裡寫圖片描述

後臺直接用JavaBean接收,SpringMVC會自動將JS物件屬性對映到JavaBean屬性中,條件是屬性名相同
這裡寫圖片描述

當然,如果有些屬性不存在於JavaBean中也可以直接在控制器引數內定義該屬性物件接收也是可以的,注意屬性名不要相同就可以。

JS物件屬性資料校驗

上面的函式我們將form表單序列化成JS物件,那麼我們可以再寫一個JS函式對此物件進行資料校驗,函式內部提示資訊為封裝的layer元件提示資訊。

    /**
     * JS物件資料驗證,預設為非空校驗,可以追加驗證規則                                                                    
     * @param obj 校驗物件                                                                                  
     * @param rule 追加校驗規則物件,格式如下:                                                                   
     * {                                                                                                
     *  field:{                                                                                         
     *          a:b,                --> ac為需要校驗的欄位名如:name                                           
     *          c:d                 --> bd為對應校驗欄位的錯誤提示資訊                                            
     *        },                                                                                        
     *  addParam:{                  --> 追加驗證引數                                                      
     *          '-1':['a','b']      --> 表示obj中屬性名為a和b的值若為'-1'則驗證失敗                                  
     *       }                                                                                          
     * }                                                                                                
     *  msgfun:function(field,msg){ --> 校驗失敗後的回撥函式,可以不設定,可以獲取校驗失敗的屬性名field及對應錯誤提示資訊msg
     *      //do somethings...  可以在這裡自定義校驗失敗訊息提示方式和提示資訊                                         
     *  }                                                                                               
     */
$.validateObj = function(obj,rule,msgfun) {
    if(!(obj instanceof Object)) {
        throw new Error('校驗的物件不是Object型別');
    }
    if(!(rule instanceof Object)) {
        throw new Error('驗證規則格式不正確');
    }
    if(!rule.field || !(rule.field instanceof Object)) {
        throw new Error('field不存在或不是一個物件');
    }
    var val = undefined;
    var addval = undefined;
    for(fieldname in rule.field) {
        val = obj[fieldname];
        if(val === undefined) {
            throw new Error('校驗物件不存在'+fieldname+'屬性');
        }
        if(rule.addParam) {
            if(!(rule.addParam instanceof Object)) {
                throw new Error('追加驗證規則格式不正確');
            }
            for(addname in rule.addParam) {
                if(!(rule.addParam[addname] instanceof Array)) {
                    throw new Error('追加驗證屬性格式必須是一個數組');
                }
                for(i in rule.addParam[addname]) {
                    addval = obj[rule.addParam[addname][i]];
                    if(addval === undefined) {
                        throw new Error('校驗物件不存在追加校驗屬性' + rule.addParam[addname][i]);
                    }
                    if(rule.addParam[addname][i] == fieldname) {
                        if(val == addname) {
                            if(!msgfun) {
                                $.fail_msg(rule.field[fieldname]);
                            }else {
                                msgfun(fieldname, rule.field[fieldname]);
                            }
                            return false;
                        }
                        break;
                    }
                }
            }
        }
        if(val == null || $.trim(val) == '') {
            if(!msgfun) {
                $.fail_msg(rule.field[fieldname]);
            }else {
                msgfun(fieldname, rule.field[fieldname]);
            }
            return false;
        }
    }
    return true;
};

使用格式:
$.validateObj([校驗物件],{
    field:{
        [校驗欄位名]:[校驗失敗提示資訊],
        [校驗欄位名]:[校驗失敗提示資訊],
        [校驗欄位名]:[校驗失敗提示資訊]
    },
    addParam:{//不需要可以不寫此屬性
        [追加校驗規則]:['[指定追加規則適用欄位名]','[指定追加規則適用欄位名]','[指定追加規則適用欄位名]']
    }
},function(field,msg) {//不需要可以不加回調函式
    //回撥函式,引數為校驗失敗的欄位名field及校驗失敗提示資訊
})

使用示例

這裡我沒有使用回撥函式,如果添加回調函式引數可以獲取校驗失敗的欄位名和失敗資訊,然後可以在回撥函式內自定義失敗資訊提示方式。
這裡寫圖片描述

字串日期比較

/**
 * 比較倆個字串時間A-B
 * A>B return 1
 * A<B return -1
 * A=B return 0
 */
$.compareTime = function(time1,time2) {
    if(new Date(time1.replace("-", "/").replace("-", "/")).getTime() > new Date(time2.replace("-", "/").replace("-", "/")).getTime()) {
        return 1;
    }else if(new Date(time1.replace("-", "/").replace("-", "/")).getTime() < new Date(time2.replace("-", "/").replace("-", "/")).getTime()) {
        return -1;
    }else if(new Date(time1.replace("-", "/").replace("-", "/")).getTime() == new Date(time2.replace("-", "/").replace("-", "/")).getTime()) {
        return 0;
    }else {
        return 2;
    }
};

待續…