JavaScript 输入验证 - 意外结果

Question

我有这个事件监听函数

document.addEventListener('input', function (e) {
    if (e.target.classList.contains('mileage-validation')) {
        if (document.getElementById('warningMileage').value > document.getElementById('scheduledMileage').value) {                
            document.getElementById('mileageError').classList.toggle('hidden');
        }
        else {
            document.getElementById('mileageError').classList.toggle('hidden');
        }
    }
})

在剃刀视图中使用以下标记

            <li>@Html.LabelFor(m => m.Maintenance.ScheduledMileage) @Html.EditorFor(m => m.Maintenance.ScheduledMileage, new { htmlAttributes = new { @class = "form-control mileage-validation", id = "scheduledMileage" } })</li>
            <li>@Html.ValidationMessageFor(m => m.Maintenance.ScheduledMileage, null, new { @class = "validation-error" })</li>

            <li>@Html.LabelFor(m => m.Maintenance.WarningMileage) @Html.EditorFor(m => m.Maintenance.WarningMileage, new { htmlAttributes = new { @class = "form-control mileage-validation", id = "warningMileage" } })</li>
            <li>
                @Html.ValidationMessageFor(m => m.Maintenance.WarningMileage, null, new { @class = "validation-error" })
                <span class="validation-error hidden" id="mileageError">Warning Mileage should be less than Scheduled Mileage.</span>
            </li>

我正在尝试在用户提交之前验证WarningMileage 值是否小于ScheduledMileage 值（如果为假则显示错误）。

1. 测试 - 在计划里程字段中输入 10，在警告里程字段中输入 0 结果 - 显示错误

   错了

2. 测试 - 在警告里程字段中输入 9，而在计划里程字段中仍输入 10 结果 - 错误被隐藏

   正确

3. 测试 - 返回预定里程字段并将值增加到 11 结果 - 显示错误（但警告里程少于预定里程！）

   错了

希望这是有道理的，毫无疑问这是愚蠢的。提前致谢！

Answer 1

在这里找到答案javascript "less than" if statement failing “您可以简单地对值执行 parseInt/parseFloat”