寫了幾個實用的JS函式,記錄下。
阿新 • • 發佈:2019-02-08
將自定義函式擴充套件至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;
}
};
待續…