写了几个实用的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;
    }
};

待续…