解决表单提交前逗号分隔符导致计算错误的问题_技术教程

本文旨在解决在JavaScript表单中，由于输入金额字段包含逗号分隔符，导致提交后无法进行正确计算的问题。通过修改JavaScript代码，在计算前移除逗号，并将字符串转换为数值类型，确保表单数据的有效性和计算的准确性。

在使用JavaScript开发表单时，为了提高用户体验，经常会在金额输入框中添加千位分隔符（逗号）。然而，当表单提交后，这些逗号会干扰后端的数值计算，导致错误。本文将介绍如何修改JavaScript代码，在提交表单进行计算之前，移除这些逗号，并将字符串转换为数值类型，从而保证计算的正确性。

移除逗号并转换为数值

核心思路是在获取输入框的值之后，使用 JavaScript 的 replace() 方法移除字符串中的逗号，然后使用 + 运算符将字符串转换为数值。

以下是修改后的代码示例：

function Calculate2(event) {
    var years = $("#cal2_txtTenor").val();
    var rate = $("#cal2_txtInterestRate").val();
    // 移除逗号并转换为数值
    var pv = +$("#cal2_txtLoan").val().replace(/,/g, '');

    if (CheckForDigit(years) && CheckForDigit(rate) && CheckForDigit(pv)) {
        var ir = (rate / 100) * 100; // For LH, add 1 more
        var installment = CalculatePMT(pv, ir, years);
        $("#cal2_txtInstallment").val(FormatNumberToString(installment));
        $("#cal2_txtMinimumIncome").val(FormatNumberToString(installment));
    } else
        alert("processing error");
}

代码解释：

$("#cal2_txtLoan").val()：获取ID为 cal2_txtLoan 的输入框的值（字符串）。
.replace(/,/g, '')：使用正则表达式 /,/g 匹配所有逗号，并将其替换为空字符串，从而移除所有逗号。
+：一元加法运算符，用于将字符串转换为数值。例如：+"123" 的结果为数值 123。

完整代码示例

以下是包含上述修改的完整 JavaScript 代码：

$(document).ready(function() {
    $('.project-selector select').change(function() {
        $.ajax({
            url: '/project/get-pattern-list?id=' + $(this).val(),
            type: 'get',
            success: function(response) {
                $('.pattern-selector select').html(response);
                if (response.trim() == "") $('.pattern-selector').hide();
                else $('.pattern-selector').show();
                reload_data();
            }
        });
    });
    $('.pattern-selector select').change(function() {
        reload_data();
    });

    function reload_data() {
        $.ajax({
            url: '/project/get-pattern-info?projectid=' + $('.project-selector select').val() + "&id=" + $('.pattern-selector select').val(),
            type: 'get',
            dataType: 'json',
            success: function(response) {
                if (response.length > 0) {
                    $('.pattern-name').text(response[0].name);
                    $('.pattern-area').text(response[0].total_area);
                    $('.pattern-price').text(parseInt(response[0].price));
                } else {
                    $('.pattern-name').text("-");
                    $('.pattern-area').text("-");
                    $('.pattern-price').text("-");
                }
            }
        });
    }


    function CheckForDigit(checkValue) {
        var valid = true;
        if (isNaN(checkValue))
            valid = false;
        if (checkValue == "")
            valid = false;
        return valid;
    }

    function FormatNumberToString(nStr) {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }

    function CalculatePMT(pv, rate, years) {
        return Math.round(pv * (rate / 100 / 12) / (1 - 1 / Math.pow((1 + rate / 100 / 12), (years * 12))));

    }

    /************** CALCULATE 2 *************/
    $("#cal2_btnCalculate").click(Calculate2);

    function Calculate2(event) {
        var years = $("#cal2_txtTenor").val()
        var rate = $("#cal2_txtInterestRate").val();
        // 移除逗号并转换为数值
        var pv = +$("#cal2_txtLoan").val().replace(/,/g, '');

        if (CheckForDigit(years) && CheckForDigit(rate) && CheckForDigit(pv)) {
            var ir = (rate / 100) * 100; // For LH, add 1 more
            var installment = CalculatePMT(pv, ir, years);
            $("#cal2_txtInstallment").val(FormatNumberToString(installment));
            $("#cal2_txtMinimumIncome").val(FormatNumberToString(installment));
        } else
            alert("processing error");
    }
    /*****************************************/

});



var cal2_txtLoan = document.getElementById('cal2_txtLoan');

cal2_txtLoan.addEventListener('keyup', function() {
    var val = this.value;
    val = val.replace(/[^0-9\.]/g, '');

    if (val != "") {
        valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0], 10)).toLocaleString();
        val = valArr.join('.');
    }

    this.value = val;
});