Format the amount with commas every three digits and two decimal places

According to the needs of the customer, it is hoped that all the amounts in the system should be formatted and displayed: commas should be added to every three integer digits and two decimal places should be reserved. When inputting in the input box, after the focus is left, the input amount is also formatted, but when saving to the database, the number is saved instead of a string.

 

1. HTML formatted display amount

Formatted display of the amount (in cents) retrieved from the database:

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

• 1

The displayed effect is: 

Or set how to format:

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

• 1

The displayed effect is: 

 

2. Format the input input amount

There are several reference methods: 
JS provides 4 thousand-digit formatting methods  
for WEB development amount. Every three-digit comma is formatted  
with three-digit comma processing, and two-digit decimal  
amount is formatted and formatted and restored.

The method of the second link is used here. The program segment is as follows:

//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

 

When using the above method for string formatting for the first time, an error is reported after going to the test environment. After debugging with IE browser F12, I found that the problem is that the lower version of IE (lower than 8) does not support the trim() method. 
Solution reference: 
ie 7/8 does not support the solution of the attribute of trim