JavaScript表单计算异常：montantTotalCom减montantPaye结果不符

问题原因 #

你遇到的核心问题有两个：

1. 未校验总金额的有效性：代码只检查了montantPaye是否为有效数字，却忽略了montantTotalCom的校验。当MontantTotalCom输入为空或非数字时，parseFloat会返回NaN，后续计算会出现异常；如果输入框默认值为0，则会直接得到0 - montantPaye = -montantPaye的结果。
2. 错误的判断条件：montantTotalCom === ''这个判断完全无效——parseFloat返回的是数字类型（或NaN），永远不可能等于字符串''，导致空总金额的场景无法被正确处理。

修复后的代码 #

function verifierMontant(value) {
    const montantTotalComInput = document.getElementById('MontantTotalCom');
    const montantTotalCom = parseFloat(montantTotalComInput.value);
    const montantPayeInput = document.getElementById('MontantPaye');
    const montantPaye = parseFloat(montantPayeInput.value);
    const resteAPayerInput = document.getElementById('ResteaPayer');

    // 先校验总金额是否有效
    if (isNaN(montantTotalCom)) {
        montantTotalComInput.style.backgroundColor = 'red';
        montantTotalComInput.focus();
        montantPayeInput.style.backgroundColor = '';
        resteAPayerInput.value = '';
        return;
    }
    montantTotalComInput.style.backgroundColor = '';

    // 校验支付金额有效性
    if (isNaN(montantPaye)) {
        montantPayeInput.value = '';
        montantPayeInput.style.backgroundColor = 'red';
        montantPayeInput.focus();
        resteAPayerInput.value = '';
    } else if (montantPaye <= montantTotalCom) {
        montantPayeInput.style.backgroundColor = '';
        const result = montantTotalCom - montantPaye;
        resteAPayerInput.value = result;
    } else {
        montantPayeInput.style.backgroundColor = 'red';
        montantPayeInput.focus();
        resteAPayerInput.value = '';
    }
}

修复说明 #

• 新增总金额校验：先检查montantTotalCom是否为有效数字，无效时直接提示并终止后续逻辑。
• 移除无效判断：删掉montantTotalCom === ''这个无意义的条件。
• 优化逻辑顺序：确保只有当两个金额都有效时，才进行剩余金额计算，避免异常值参与运算。

内容的提问来源于stack exchange，提问作者kouas trad