如何使用jquery正确格式化货币?


77

我不需要遮罩,但是我需要一些可以格式化货币的格式(在所有浏览器中),并且不允许键入任何字母或特殊字符。谢谢您的帮助

例:

有效期:$ 50.00
$ 1,000.53

无效:$ w45.00
$ 34.3r6


您能解释为什么其他的不符合您的标准吗?
杰夫,

37
StackOverflow是我搜索此类问题的引擎。这里的社区反馈使您可以更快,更准确地了解哪些工具和实践受到重视。我说,让这些类型的问题不断出现。
Feckmore

13
从Google这里获得。
the-nick-wilson

3
这个问题是Google搜寻“ jquery格式货币”的最佳结果
Paul L

这回答了你的问题了吗?如何将数字格式化为货币字符串?
异端猴子

Answers:



99

另一个选择(如果使用的是ASP.Net剃刀视图),则可以在视图上执行

<div>@String.Format("{0:C}", Model.total)</div>

这样可以正确格式化。注意(item.total为双精度/十进制)

如果在jQuery中您还可以使用Regex

$(".totalSum").text('$' + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

4
我没有对此表示否决,但是@String.Format在任何HTML或jQuery参考中都找不到。我的猜测是它与ASP.NET生成的服务器端HTML有关。原始问题是否提到了这一点?
Nate

5
对于将来想知道的人,@ String.Format是ASP.NET的剃须刀引擎。MVC
凯尔

2
我喜欢正则表达式。为什么结尾是.toString()?.replace返回一个字符串。
xr280xr 2014年

3
我也没有对此表示反对,但是值得为MVC Razor解决方案提供一个没有提到Razor,MVC甚至ASP.NET的问题,而且答案甚至都没有说明这是MVC的解决方案剃刀。
乔纳森·伍德

1
这是一个很好的答案,但是我如何更改正则表达式才能获得不带小数位且不带美元符号的数字?例如,我希望将16000000显示为16,000,000
ministe2003年

37

扩展Melu的答案,您可以执行此操作以使代码功能化并处理负数。

样本输出:
$ 5.23-
$ 5.23

function formatCurrency(total) {
    var neg = false;
    if(total < 0) {
        neg = true;
        total = Math.abs(total);
    }
    return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}

20

作为为什么jQuery FormatCurrency插件是一个很好的答案的推论,我想反驳您的评论:

1. code.google.com/p/jquery-formatcurrency-不过滤掉所有字母。您可以键入一个字母,但不会删除它。

是的,formatCurrency()本身不会过滤掉字母:

// only formats currency
$(selector).formatCurrency();

但是,包含在formatCurrency插件中的toNumber()确实可以。

因此,您想这样做:

// removes invalid characters, then formats currency
$(selector).toNumber().formatCurrency();

15

使用jquery.inputmask 3.X在此处查看演示

包含文件:

<script src="/assets/jquery.inputmask.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.extensions.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.numeric.extensions.js" type="text/javascript"></script>

和编码为

$(selector).inputmask('decimal',
  { 'alias': 'numeric',
    'groupSeparator': '.',
    'autoGroup': true,
    'digits': 2,
    'radixPoint': ",",
    'digitsOptional': false,
    'allowMinus': false,
    'prefix': '$ ',
    'placeholder': '0'
  }
);

强调:

  • 使用方便
  • 面罩中有可选零件
  • 定义别名以隐藏复杂性的可能性
  • 日期/日期时间掩码
  • 数字掩码
  • 很多回调
  • 非贪婪的面具
  • 可以通过选项启用/禁用/配置许多功能
  • 支持只读/禁用/ dir =“ rtl”属性
  • 支持数据输入掩码属性
  • 多遮罩支持
  • regex-mask支持
  • 动态蒙版支持
  • 预处理遮罩支持
  • 值格式化/不带输入元素的验证

从Web下载ZIP文件后,我发现ZIP文件中的* .js文件具有不同的文件命名约定。我有点困惑....
gumuruh '17

@gumuruh查看ZIP文件的dist /文件夹。提取文件夹的根目录中的ZIP属于软件包,不能使用。注意扩展。仅加载您需要的内容。
费尔南多·科什

@FernandoKosh @ drew010是否可以将其用于页面上的多个元素?例如: $('.price-format').inputmaks()$('.price-format').each(function() { $(this).inputmask() })
remkovdm

1
@remkovdm自从我现在实现它已经有一段时间了,但是是的,我相信那很好。文档和示例显示$(selector),这意味着它可以像其他任何jQuery一样都是CSS选择器。所以$('.price-format').inputmask('decimal', { ... }); 应该工作。
drew010

9

我曾经使用jquery格式的货币插件,但是最近一直存在很多问题。我只需要为USD / CAD格式化,所以我编写了自己的自动格式化。

$(".currencyMask").change(function () {
            if (!$.isNumeric($(this).val()))
                $(this).val('0').trigger('change');

            $(this).val(parseFloat($(this).val(), 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
        });

只需设置任何应格式化为货币的输入类别,<input type="text" class="currencyMask" />它将在任何浏览器中完美格式化。


4

尝试使用jQuery (没有插件)使用正则表达式货币:

$(document).ready(function(){
  $('#test').click(function() {
    TESTCURRENCY = $('#value').val().toString().match(/(?=[\s\d])(?:\s\.|\d+(?:[.]\d+)*)/gmi);
    if (TESTCURRENCY.length <= 1) {
      $('#valueshow').val(
        parseFloat(TESTCURRENCY.toString().match(/^\d+(?:\.\d{0,2})?/))
      );
    } else {
      $('#valueshow').val('Invalid a value!');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" value="12345.67890" id="value">
<input type="button" id="test" value="CLICK">
<input type="text" value="" id="valueshow">

编辑:新建一个检查值是否有效/无效


需要投票解决什么问题?这个问题(请阅读meta.stackoverflow.com/questions/251758/…谢谢)
KingRider
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.