您的位置:首页 > Web前端 > JavaScript

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

2017-02-22 10:57 786 查看

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

一.HTML格式化显示金额

将从数据库中取出的金额数字(单位为分)格式化显示出来:

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


显示的效果为:



或者设置格式化的方式:

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


显示的效果为:



二.格式化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));
}
}
}


初次在使用上述方法进行字符串格式化时,上测试环境之后报错。经IE浏览器F12调试后,发现问题出在ie低版本(低于8)不支持trim()方法。

解决方案参考:

ie 7/8不支持trim的属性的解决方案
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  格式化 js
相关文章推荐