如何在海岸火灾计算器中验证和处理边缘情况？

Question

我正在构建一个 Web 应用程序来计算 Coast FIRE（财务独立，提前退休）数字。假设没有额外的贡献，计算器使用复利估算当前储蓄的未来价值。

我使用的公式是： 终值 = 现值 × (1 + 回报率) ^ 年

我为此计算实现了以下 JavaScript 函数：

function calculateFutureValue(presentValue, rateOfReturn, years) {
    return presentValue * Math.pow(1 + rateOfReturn, years);
}

// Example usage
const presentValue = 50000; // $50,000
const rateOfReturn = 0.07;  // 7%
const years = 30;           // 30 years

const futureValue = calculateFutureValue(presentValue, rateOfReturn, years);
console.log(futureValue);   // Expected output: ~380612.54

代码对于基本输入可以正确工作，但我想处理边缘情况以使其更加健壮。例如：

1. 无效输入：验证presentValue、rateOfReturn 和years 是否为非负数的最佳方法是什么？
2. 边缘情况：我应该如何处理一个或多个输入丢失、为空或未定义的情况？

我使用基本的 HTML 表单字段收集用户输入，如下所示：

<form id="fire-calculator">
    <label for="presentValue">Present Value ($):</label>
    <input type="number" id="presentValue" min="0" required>

    <label for="rateOfReturn">Rate of Return (%):</label>
    <input type="number" id="rateOfReturn" min="0" step="0.01" required>

    <label for="years">Years:</label>
    <input type="number" id="years" min="0" required>

    <button type="submit">Calculate</button>
</form>

这是我编写的用于收集表单输入并调用计算函数的 JavaScript：

document.getElementById("fire-calculator").addEventListener("submit", function (event) {
    event.preventDefault();

    const presentValue = parseFloat(document.getElementById("presentValue").value);
    const rateOfReturn = parseFloat(document.getElementById("rateOfReturn").value) / 100;
    const years = parseInt(document.getElementById("years").value, 10);

    try {
        if (isNaN(presentValue) || isNaN(rateOfReturn) || isNaN(years)) {
            throw new Error("All inputs must be valid numbers.");
        }

        if (presentValue < 0 || rateOfReturn < 0 || years < 0) {
            throw new Error("Inputs must be non-negative.");
        }

        const futureValue = calculateFutureValue(presentValue, rateOfReturn, years);
        alert(`Future Value: $${futureValue.toFixed(2)}`);
    } catch (error) {
        alert(error.message);
    }
});

具体问题：

如何改进输入验证和错误处理，使其更加健壮和用户友好？例如：

是否有更好的方法来处理表单和功能级别的验证？ 是否有处理此类计算中丢失或无效数据的最佳实践？ 我将不胜感激任何关于提高计算器的稳健性同时保持代码可维护性和用户友好性的反馈。

Answer 1

我认为您可以跳过现代浏览器已经验证的内容，因为它们处理得很好。对于 HTML 表单验证无法管理的额外事情，您应该单独处理它们。您可以使用

HTMLObjectElement.setCustomValidity()

显示自定义错误消息。