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函数:(首先确认提交，然后发起ajax请求。最后回传后台的处理信息)

function ajaxSubmitForm(formId) {
    if(!confirm("确认保存?")){
        return;
    }
    var form = $("#"+formId);
    var url = form.attr("action");
    $.post(url, form.serialize(), function(responseMap) {
        if(responseMap){
            alert(responseMap.msg);
        }else{
            alert("失败!");
        }
    }, 'json');
}

 

 

后台 回传到前台是一个map，msg是里面处理完的信息，如下java代码:

    public String saveSettings() {
        ShiroPermissionUtils.checkPerissionAny("systemmanager:settings");
        responseMap = new HashMap();

        try {
            if (StringUtils.isNoneBlank(safeHatNumLength)) {
                ExamSystemUtils.setProperty(ExamSystemUtils.safeHatNumLength, safeHatNumLength);
            }
            if (StringUtils.isNoneBlank(safeHatNumLength)) {
                ExamSystemUtils.setProperty(ExamSystemUtils.physicalStatus, physicalStatus);
            }
            if (StringUtils.isNoneBlank(safeHatNumLength)) {
                ExamSystemUtils.setProperty(ExamSystemUtils.educateBackground, educateBackground);
            }
        } catch (Exception e) {
            log.error("saveSettings error", e);
            responseMap.put("msg", "保存失败!");
            return "json";
        }
        
        responseMap.put("msg", "保存成功!");
        return "json";
    }

 

 HTML代码:(form要写上action，最后的点击按钮类型要是button，否则默认是submit)

                                <form action="${baseurl}/view/settingAction_saveSettings.do" method="post" id="saveSettings">
                                    <label for="safeHatNumLength">安全帽编号长度:</label>
                                    <input type="text" name="safeHatNumLength" value="${safeHatNumLength}">
                                    <br/><br/>
                                    <s:textarea label="员工身体状况" name="physicalStatus" cols="30" rows="3" labelposition="left" value="%{physicalStatus}"/>
                                    <span>多个值用英文状态的逗号分隔</span>
                                    <br/><br/>
                                    <s:textarea label="员工学历状况" name="educateBackground" cols="30" rows="3" labelposition="left" value="%{educateBackground}"/>
                                    <span>多个值用英文状态的逗号分隔</span>
                                    <br/><br/>
                                    <input type="button" value="保存" onclick="ajaxSubmitForm('saveSettings')"/>
                                </form>

 

 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?'女':'男');//设置性别
}

 

身份证号 倒数第二位是性别，奇数为男，偶数为女

 

 

更全的参考:https://www.cnblogs.com/adouwt/p/8473120.html