JS几个常用的工具函数

 

　　项目中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="保存"/>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <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');"/>
                                &nbsp;&nbsp;
                                <input type="submit" class="btn btn-info" value="保存" onclick="submitAndForward('addOperationForm', '/Exam/view/ownercharge/operation/listOperation.jsp')"/>
                                &nbsp;&nbsp;
                                <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 "";
}