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

发布于 2024-10-18 02:34:44 字数 155 浏览 2 评论 0原文

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

示例:

有效:$50.00
$1,000.53

无效:$w45.00
$34.3r6

I do not need a mask, but I need something that will format currency(in all browsers) and not allow for any letters or special char's to be typed. Thanks for the help

Example:

Valid: $50.00
$1,000.53

Not Valid: $w45.00
$34.3r6

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

梦旅人picnic 2024-10-25 02:34:44

另一个选项(如果您使用的是 ASP.Net razor 视图)是,在您的视图上,您​​可以执行

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

此操作,这将正确格式化它。注意(item.total 是双精度/小数)

如果在 jQuery 中你也可以使用正则表达式

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

Another option (If you are using ASP.Net razor view) is, On your view you can do

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

This would format it correctly. note (item.total is double/decimal)

if in jQuery you can also use Regex

$(".totalSum").text('
 + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
一袭白衣梦中忆 2024-10-25 02:34:44

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

Expanding upon Melu's answer you can do this to functionalize the code and handle negative amounts.

Sample Output:
$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();
}
沙与沫 2024-10-25 02:34:44

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

As a corollary to why the jQuery FormatCurrency plugin is a good answer, I'd like to rebut your comment:

1. code.google.com/p/jquery-formatcurrency - Does not filter out all letter's. You can type a single letter and it will not remove it.

Yes, formatCurrency() by itself does not filter out letters:

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

But toNumber(), included in the formatCurrency plugin, does.

You thus want to do:

// removes invalid characters, then formats currency
$(selector).toNumber().formatCurrency();
仙女山的月亮 2024-10-25 02:34:44

使用 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'
  }
);

亮点:

  • 易于使用
  • 中任何位置的可选部分
  • 掩码 定义隐藏复杂性的别名
  • 日期/日期时间掩码
  • 数字掩码
  • 大量回调
  • 非贪婪掩码
  • 许多功能可以通过选项启用/禁用/配置
  • 支持 readonly/disabled/dir="rtl" 属性
  • 支持 data-inputmask 属性
  • 多掩码支持
  • 正则表达式掩码支持
  • 动态掩码支持
  • 预处理掩码支持
  • 值格式化/无需输入元素验证

Use jquery.inputmask 3.x.
See demos here

Include files:

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

And code as

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

Highlights:

  • easy to use
  • optional parts anywere in the mask
  • possibility to define aliases which hide complexity
  • date / datetime masks
  • numeric masks
  • lots of callbacks
  • non-greedy masks
  • many features can be enabled/disabled/configured by options
  • supports readonly/disabled/dir="rtl" attributes
  • support data-inputmask attribute(s)
  • multi-mask support
  • regex-mask support
  • dynamic-mask support
  • preprocessing-mask support
  • value formatting / validating without input element
娇柔作态 2024-10-25 02:34:44

我以前用过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());
        });

只需设置应格式化为货币 的任何输入的类,它将在任何浏览器中完美格式化。

I used to use the jquery format currency plugin, but it has been very buggy recently. I only need formatting for USD/CAD, so I wrote my own automatic formatting.

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

Simply set the class of whatever input should be formatted as currency <input type="text" class="currencyMask" /> and it will format it perfectly in any browser.

酷炫老祖宗 2024-10-25 02:34:44

尝试使用 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">

编辑:新检查值是否有效

Try regexp currency with jQuery (no plugin):

$(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">

Edit: New check a value to valid/invalid

巡山小妖精 2024-10-25 02:34:44

JavaScript 已经有了它。

var cur = function (amt) {
    return Intl.NumberFormat('en-US', { style: "currency", currency: "USD" }).format(amt);
};

JavaScript already has it.

var cur = function (amt) {
    return Intl.NumberFormat('en-US', { style: "currency", currency: "USD" }).format(amt);
};
寂寞花火° 2024-10-25 02:34:44

C#

@{
    CultureInfo newCulture = CultureInfo.CreateSpecificCulture(Model.culture);
var ri = new RegionInfo(@newCulture.LCID);
}

jQuery

$(document).find("#labGrandTotal").text(Intl.NumberFormat('@Model.culture', { style: 'currency', currency: '@ri.ISOCurrencySymbol'}).format(num));

其中 Model.culture 是例如“en-GB”

C#

@{
    CultureInfo newCulture = CultureInfo.CreateSpecificCulture(Model.culture);
var ri = new RegionInfo(@newCulture.LCID);
}

jQuery

$(document).find("#labGrandTotal").text(Intl.NumberFormat('@Model.culture', { style: 'currency', currency: '@ri.ISOCurrencySymbol'}).format(num));

Where Model.culture is for example "en-GB"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文