格式化金额，每三位加逗号并保留两位小数

应客户的需求，希望将系统的所有金额格式化显示：整数位每隔三位加逗号，并保留两位小数。在input框输入时，焦点离开后，同样将输入的金额格式化，但保存到数据库时，保存数字而非字符串。

 

一.HTML格式化显示金额

将从数据库中取出的金额数字（单位为分）格式化显示出来：

<c:if test="${not empty item.getNum()}"><fmt:formatNumber value="${item.getNum()/100}" type="currency"  /> </c:if>

• 1

显示的效果为： 

或者设置格式化的方式：

<c:if test="${not empty item.getNum()}"><fmt:formatNumber value="${item.getNum()/100}"  pattern="#,##0.0#" /> </c:if>

• 1

显示的效果为： 

 

二.格式化input输入金额

附带几个参考方式： 
JS提供的4中数字千位符格式化方法 
关于WEB开发金额每三位逗号格式化 
三位加逗号处理，保留两位小数 
金额格式化及格式换还原

这里使用了第二条链接的方法。程序段如下：

//IE8以后才支持trim方法。这里防止方法不兼容
String.prototype.trim = function () {
return this .replace(/^\s\s*/, '' ).replace(/\s\s*$/, '' );
 }

// 格式化数字成0,000.00  
   function formatNumber(value) {  
    var result = "";  
    //将证书部分和小数部分分开
    var valueParts = value.split(".");  
    var mostSignificationDigit = valueParts[0].length -1;   // 最高有效数字位，默认为个位  
    var intervalOfDigit = 0;    // 逗号之间的位数（从零累计）  
    var digit, countOfSignificationDigit;  

    //按位取出整数部分的值
    //如果不加下面这句话，低版本浏览器可能无法处理整数部分
    var roundNum = valueParts[0].split("");

    for (var i = valueParts[0].length -1; i >= 0; i--) {  
        digit = roundNum[i];  
        result = digit + result;  
        if (digit != "0") {  
            mostSignificationDigit = i;  
        }  
        //每三位添加逗号
        if (3 == ++intervalOfDigit) {  
            result = "," + result;  
            intervalOfDigit = 0;  
        }  
        //alert(digit);
        //alert(result);
    }  
    if (mostSignificationDigit == -1) {  
        result = "0";  
    }  
    else {  
        countOfSignificationDigit = valueParts[0].length - mostSignificationDigit;  
        if (countOfSignificationDigit > 3) {  
            result = result.substring(result.length - (countOfSignificationDigit%3 == 0 ? countOfSignificationDigit/3 - 1 : countOfSignificationDigit/3)  - countOfSignificationDigit);  
        }  
        else {  
            result = result.substring(result.length - countOfSignificationDigit);  
        }  
    }  
    if (valueParts.length == 2) {  
        result += ".";  
        var temp = 2 - valueParts[1].length;    // 是否需要补0  
        for (var i = 0; i < temp; i++) {  
            valueParts[1] += "0"  
        }  
        result += valueParts[1].substring(0, 2);  
    }  
    else {  
        result += ".00";  
    }  
    return result;  
}  

// 鼠标再次聚焦文本域，就清除货币格式，显示无格式的数字  
function clearAllFormat(obj){  
    if(obj!=null&&$(obj).val()!=null&&$(obj).val().trim().length>0){  
        var waitToDeleteCommaNumber = $(obj).val();  
        var newInputValue = waitToDeleteCommaNumber.replace(/,/g,"");  
        $(obj).val(newInputValue.toString());  
        return newInputValue.toString();  
    }  
}  


// 验证是否为浮点数  
function checkNumberIsLegal22(obj){  

    if(!/^[0-9]+(\.[0-9]+){0,1}$/.test(obj)){  
        return false;  
    }  
        return true;  
}  

// 格式化金额类数字，每三位用逗号分隔,显示的是用逗号分隔的格式化形式  
function formatMoneyByComma(obj){  
    if(obj!=null&&$(obj).val().trim().length>0&&checkNumberIsLegal22($(obj).val())){  
        // 格式化之前，先清除格式  
        clearAllFormat(obj);  
        if($(obj).val()){  
        var currentNumber = $(obj).val();  
        $(obj).val(formatNumber(currentNumber));  
    }  
}  
}  

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90

 

初次在使用上述方法进行字符串格式化时，上测试环境之后报错。经IE浏览器F12调试后，发现问题出在ie低版本（低于8）不支持trim()方法。 
解决方案参考： 
ie 7/8不支持trim的属性的解决方案