将自定义函数扩展至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;
}
};
待续…