ฉันจะจัดรูปแบบสกุลเงินให้ถูกต้องโดยใช้ jquery ได้อย่างไร

ปลั๊กอินรูปแบบ JQUERY
http://code.google.com/p/jquery-formatcurrency/

ตัวเลือกอื่น (หากคุณใช้มุมมองมีดโกน 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());

การขยายคำตอบของ 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();
}

เพื่อพิสูจน์ว่าเหตุใดปลั๊กอิน jQuery FormatCurrency จึงเป็นคำตอบที่ดี ฉันอยากจะโต้แย้งความคิดเห็นของคุณ:

1. code.google.com/p/jquery-formatcurrency - ไม่กรองตัวอักษรทั้งหมดออก คุณสามารถพิมพ์อักษรตัวเดียวและจะไม่ลบออก

ใช่ formatCurrency() ด้วยตัวเองไม่ได้กรองตัวอักษรออก:

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

แต่ toNumber() ซึ่งรวมอยู่ในปลั๊กอิน formatCurrency ทำได้

คุณต้องการที่จะทำ:

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

ใช้ 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"
• รองรับแอตทริบิวต์ data-inputmask
• รองรับหลายหน้ากาก
• การสนับสนุน regex-mask
• การสนับสนุนมาสก์แบบไดนามิก
• การสนับสนุนมาสก์ก่อนการประมวลผล
• การจัดรูปแบบค่า / การตรวจสอบความถูกต้องโดยไม่มีองค์ประกอบอินพุต

ฉันเคยใช้ปลั๊กอินสกุลเงินรูปแบบ 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" /> แล้วระบบจะจัดรูปแบบให้สมบูรณ์แบบในเบราว์เซอร์ใดก็ได้

ลองใช้สกุลเงิน regexp ด้วย 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">

แก้ไข: ตรวจสอบค่าใหม่ให้ถูกต้อง/ไม่ถูกต้อง