項目中JS也不可避免會出現重用，所以可以像Java一樣抽成工具類，下面總結了幾個常用的函數:
1.日期處理函數
將日期返回按指定格式處理過的字符串:
function Format(now,mask) { var d = now; var zeroize = function (value, length) { if (!length) length = 2; value = String(value); for (var i = 0, zeros = ''; i < (length - value.length); i++) { zeros += '0'; } return zeros + value; }; return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) { switch ($0) { case 'd': return d.getDate(); case 'dd': return zeroize(d.getDate()); case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()]; case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()]; case 'M': return d.getMonth() + 1; case 'MM': return zeroize(d.getMonth() + 1); case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()]; case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()]; case 'yy': return String(d.getFullYear()).substr(2); case 'yyyy': return d.getFullYear(); case 'h': return d.getHours() % 12 || 12; case 'hh': return zeroize(d.getHours() % 12 || 12); case 'H': return d.getHours(); case 'HH': return zeroize(d.getHours()); case 'm': return d.getMinutes(); case 'mm': return zeroize(d.getMinutes()); case 's': return d.getSeconds(); case 'ss': return zeroize(d.getSeconds()); case 'l': return zeroize(d.getMilliseconds(), 3); case 'L': var m = d.getMilliseconds(); if (m > 99) m = Math.round(m / 10); return zeroize(m); case 'tt': return d.getHours() < 12 ? 'am' : 'pm'; case 'TT': return d.getHours() < 12 ? 'AM' : 'PM'; case 'Z': return d.toUTCString().match(/[A-Z]+$/); // Return quoted strings with the surrounding quotes removed default: return $0.substr(1, $0.length - 2); } }); };
用法：
var d = new Date();//Date有需要參數可以傳入 alert(Format(d,"yyyy-MM-dd"));
2.全局處理null值或者''的函數，如果為null或者''返回-。如果傳入第二個參數，表示截取指定長度的字符串
/** * 一個值如果是null或者''返回- * @param value 需要處理的值 * @param length 需要截取的字符的長度的值,未指定的時候返回全部 * @returns {*} 處理過的值 */ function replaceNull(value,length) { //判斷截取的值是否為空 if(value == null || value==undefined || value == "" || value=='undefined'){ return "-"; } //判斷長度是否為空 if(length == null || length == ''){ return value; } return value.toString().substr(0,length); }
用法：
alert(replaceNull());// - alert(replaceNull('2018-05-03',7));// 2018-05
3.正則表達式實現trim()去掉開始和結尾的空格
function trimStr(str) { return str.replace(/(^\s*)|(\s*$)/g,""); }
注意:關於去掉兩頭空格，jquery庫提供了$.trim()方法
$.trim(" xxxxxxxxx ")
4.使用正則表達式驗證數字
/**
* 校驗只要是數字（包含正負整數，0以及正負浮點數）就返回true
**/
function isNumber(val){ var regPos = /^\d+(\.\d+)?$/; //非負浮點數 var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //負浮點數 if(regPos.test(val) || regNeg.test(val)){ return true; }else{ return false; } }
/**
* 校驗正負正數就返回true
**/
function isIntNum(val){ var regPos = / ^\d+$/; // 非負整數 var regNeg = /^\-[1-9][0-9]*$/; // 負整數 if(regPos.test(val) || regNeg.test(val)){ return true; }else{ return false; } }
5.休眠函數(模擬Thread.sleep())
//參數n為休眠時間，單位為毫秒: function sleep(n) { var start = new Date().getTime(); console.log('休眠前：' + start); while (true) { if (new Date().getTime() - start > n) { break; } } console.log('休眠后：' + new Date().getTime()); } sleep(4000);
6. ajax提交表單的方法，也就是封裝一個工具類，以ajax的方式提交表單,並且在表單成功之后做一些事情
JS函數:(重寫表單的submit函數即可)
下面的第二個參數的設計是為了有時候我們需要提交完自定義做一些操作，有時不需要。
function initWindowForm(id, successoperation) { if (!id) { return; } $('#' + id).unbind("submit"); $('#' + id).submit(function() { // 驗證所有的必填字段 var isValidated = true; $(this).find(".required").each(function() { if (!$(this).val()) { isValidated = false; } }) if (!isValidated) { alert("請檢查所有必填字段"); return false; } // 異步提交數據 $.post($('#' + id).attr('action'), $('#' + id).serialize(), function(response) { if (response && response.msg) { alert(response.msg); // 第二個參數為成功之后的處理 if (successoperation) { successoperation(); } } else { alert("未知信息"); } }); // 阻止冒泡，防止刷新 return false; }); }
后台回傳到前台是一個map，msg是里面處理完的信息，如下java代碼:
工具類代碼:
package cn.xm.exam.utils.system; import java.util.HashMap; import java.util.Map;public class SystemUtils { private SystemUtils() { throw new AssertionError(); }public static Map<String, Object> generateSuccessMap(String msg) { return generateMap(true, msg); } public static Map<String, Object> generateFailedMap(String msg) { return generateMap(false, msg); } private static Map<String, Object> generateMap(boolean successed, String msg) { Map<String, Object> result = new HashMap<>(); result.put("success", successed); result.put("msg", msg); return result; } }
action層代碼:
public String add() { if (operationcharge == null) { response = SystemUtils.generateFailedMap("operationcharge is null"); return "json"; } operationcharge.setCreator(SystemUtils.getCurrentUseridcard()); operationcharge.setCreatorfullname(SystemUtils.getCurrentUserfullname()); operationcharge.setCreatedate(new Date()); operationChargeService.save(operationcharge); response = SystemUtils.generateSuccessMap("保存成功"); return "json"; }
HTML代碼:(form要寫上action)
<script> $(function() { initWindowForm("addOperationForm"); }) </script>
<form action="operation_add.do" id="addOperationForm"> <div class="input-group el_modellist" role="toolbar"> <input type="submit" class="btn btn-info" value="保存"/> <input type="button" class="btn btn-danger" value="取消" onclick="javascript:history.back(-1);"/> </div> <div class="input-group el_modellist" role="toolbar"> <span class="el_spans">公司部門名稱<span class="requiredStart">*</span>：</span> <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentname"/> <span class="el_spans">公司部門專業<span class="requiredStart">*</span>：</span> <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentmajor"/> </div> </form>
:補充用上面的實現保存和保存並繼續
保存並繼續不做任何操作，保存之后有可能是需要關閉模態框或者進行頁面跳轉，所以做如下修改:
<form action="operation_add.do" id="addOperationForm"> <div class="input-group el_modellist" role="toolbar"> <input type="submit" class="btn btn-info" value="保存並繼續" onclick="initWindowForm('addOperationForm');"/> <input type="submit" class="btn btn-info" value="保存" onclick="submitAndForward('addOperationForm', '/Exam/view/ownercharge/operation/listOperation.jsp')"/> <input type="button" class="btn btn-danger" value="取消" onclick="javascript:history.back(-1);"/> </div> <div class="input-group el_modellist" role="toolbar"> <span class="el_spans">公司部門名稱<span class="requiredStart">*</span>：</span> <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentname"/> <span class="el_spans">公司部門專業<span class="requiredStart">*</span>：</span> <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentmajor"/> </div> </form>
保存的函數如下: 完成之后跳轉頁面
// 保存之后跳轉
function submitAndForward(id, url) {
initWindowForm(id, function(){
window.location.href = url;
});
}
這里需要注意的是按鈕的類型為submit，同時有onclick事件，所以會先觸發click事件再進行submit。
7.驗證數組是否有重復元素
對數字數組，字符串數組都有效。
function hasRepeatValue(a) { return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f" + a.join("\x0f\x0f") + "\x0f"); }
8.JS提取身份證中的性別和出生日期信息
function getIdcardData(){ var ido=document.getElementById('idCardNumberHandle');//身份證號input元素的ID var bd=document.getElementById('birthdayHandle'); var sex=document.getElementById('sexHandle'); if(!/^\d{6}((?:19|20)((?:\d{2}(?:0[13578]|1[02])(?:0[1-9]|[12]\d|3[01]))|(?:\d{2}(?:0[13456789]|1[012])(?:0[1-9]|[12]\d|30))|(?:\d{2}02(?:0[1-9]|1\d|2[0-8]))|(?:(?:0[48]|[2468][048]|[13579][26])0229)))\d{2}(\d)[xX\d]$/.test(ido.value)){ alert('身份證號非法.'); return; } bd.value=(RegExp.$1).substr(0,4)+'-'+(RegExp.$1).substr(4,2)+'-'+(RegExp.$1).substr(6,2);//設置出生日期 ex.value=(parseInt(ido.value.charAt(ido.value.length-2))%2==0?'女':'男');//設置性別 }
身份證號 倒數第二位是性別，奇數為男，偶數為女
9. JS格式化數字，保留指定位數或者按百分比格式化數字
var NumberUtils = { toFixedDecimal : function(value, scale) { var defaultValue = 0.0; if (!value || isNaN(parseFloat(value))) { value = defaultValue; } if (!scale) { scale = 2; } value = parseFloat(value); return value.toFixed(scale); }, toFixedDecimalWithPercent : function(value, scale) { value = NumberUtils.toFixedDecimal(value, 10); if (!scale) { scale = 2; } value = parseFloat(value * 100); return value.toFixed(scale) + "%"; } };
測試代碼:
console.log(NumberUtils.toFixedDecimal("1.526885"));
console.log(NumberUtils.toFixedDecimal(1.526885, 5));
console.log(NumberUtils.toFixedDecimalWithPercent(1.526885, 5));
結果:
10. 格式化相同name或class的checkbox值，有時候我們希望通過逗號連接多個值
function serializeCheckboxValuesByName(name, spliter) { if (!spliter) { spliter = ","; } return getSerializeCheckboxValues("[name='"+name+"']:checked", spliter); } function serializeCheckboxValuesByClass(clazz, spliter) { if (!spliter) { spliter = ","; } return getSerializeCheckboxValues("." + clazz + ":checked", spliter); } function getSerializeCheckboxValues(selector, spliter) { var values = []; $(selector).each(function() { values.push($(this).val()); }); if (values.length > 0) { return values.join(spliter); } return ""; }