【问题标题】:How can I correctly format currency using jquery?如何使用 jquery 正确格式化货币?
【发布时间】:2011-06-29 22:37:03
【问题描述】:

我不需要掩码,但我需要能够格式化货币(在所有浏览器中)并且不允许输入任何字母或特殊字符的东西。感谢您的帮助

例子:

有效:50.00 美元
1,000.53 美元

无效:$w45.00
$34.3r6

【问题讨论】:

  • 你能解释一下为什么其他的不符合你的标准吗?
  • StackOverflow 是我的类似问题的搜索引擎。此处的社区反馈可以更快、更准确地了解哪些工具和实践受到重视。我说,让这类问题不断出现。
  • 从 Google 获取。
  • 此问题是“jquery 格式货币”的 Google 搜索结果排名靠前
  • 这能回答你的问题吗? How to format numbers as currency string?

标签: jquery currency formatter


【解决方案1】:

使用jquery.inputmask 3.x。 见演示here

包含文件:

<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" 属性
  • 支持数据输入掩码属性
  • 多掩码支持
  • 正则表达式掩码支持
  • 动态掩码支持
  • 预处理掩码支持
  • 没有输入元素的值格式化/验证

【讨论】:

  • 下载 ZIP(从网络)后,我发现 ZIP 中的 *.js 文件具有不同的文件命名约定。我有点迷茫……
  • @gumuruh 查看 ZIP 文件的 dist/ 文件夹。解压缩文件夹根目录中的 ZIP 是打包的,不能使用。注意扩展。只加载你应该需要的。
  • @FernandoKosh @drew010 是否可以将其用于页面上的多个元素?例如:$('.price-format').inputmaks()$('.price-format').each(function() { $(this).inputmask() })
  • @remkovdm 自从我现在实施它已经有一段时间了,但是是的,我相信这很好。文档和示例显示 $(selector) 这意味着它可以像任何其他 jQuery 一样是 CSS 选择器。所以$('.price-format').inputmask('decimal', { ... }); 应该工作。
【解决方案2】:

用 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">

编辑:新检查值是否有效

【讨论】:

【解决方案3】:

我以前用jquery格式的货币插件,但是最近很bug。我只需要格式化美元/加元,所以我编写了自己的自动格式化。

$(".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());
        });

只需将任何输入的类设置为货币&lt;input type="text" class="currencyMask" /&gt;,它就会在任何浏览器中完美地格式化。

【讨论】:

    【解决方案4】:

    另一个选项(如果您使用 ASP.Net razor 视图)是,在您的视图中,您可以这样做

    <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());
    

    【讨论】:

    • 我没有投反对票,但我在任何 HTML 或 jQuery 参考中都找不到@String.Format。我的猜测是它与 ASP.NET 生成的服务器端 HTML 有关。原始问题是否提到了这一点?
    • 对于任何想知道未来的人来说,@String.Format 是 ASP.NET 的剃刀引擎 || MVC
    • 我喜欢正则表达式。为什么最后是 .toString() ? .replace 返回一个字符串。
    • 我也没有对此投反对票,但它值得为一个没有提到 Razor、MVC 甚至 ASP.NET 的问题提供 MVC Razor 解决方案,而答案没有甚至声明这是 MVC Razor 的解决方案。
    • 没关系,我已经回答了我自己的问题:$(".totalSum").text('$' + parseFloat(value, 10).toFixed(0).replace(/(\ d)(?=(?:[0-9]{3})+\b)/gm, "$1,").toString());
    【解决方案5】:

    扩展 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();
    }
    

    【讨论】:

      【解决方案6】:

      作为为什么 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();
      

      【讨论】:

        【解决方案7】:

        【讨论】:

        猜你喜欢
        • 2014-07-20
        • 2014-01-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-09-23
        • 1970-01-01
        • 1970-01-01
        • 2013-10-18
        相关资源
        最近更新 更多