JavaScript 返回错误结果

Question

在开始之前，我想说，如果这个问题已经得到解答，请引导我找到适当的答案。

我的 Java 脚本函数存在问题，未返回预期值。我尝试使用它来验证数字范围的文本输入，如果输入超出该范围，则返回自定义错误消息。

这是我尝试验证的表单中的一个字段的 HTML:

<td><input name="bottomair" type="text" required id="bottomair"
   size="3" onChange="bottomAirF()"></td>
<td class="noborder" id="bottomairerror"></td>

这是相关的 Javascript:

function bottomAirF() {
    var x, text;
    x = document.getElementById("bottomair");
    if (isNaN(x) || x < 33 || x > 40) {
        text = "Temp Out of Tolerance";
    } else {
        text = " ";
    }
    document.getElementById("bottomairerror").innerHTML = text;
}

我想要完成的是让函数检查输入的数字是否在 33 到 40 之间。如果该数字不在这两个数字之间，则代码应返回错误消息“Temp Out of Tolerance”但如果数字在 33 到 40 之间，则不应返回任何内容。就目前而言，任何数量(或缺少数量)都会返回错误消息。

此代码是根据W3School的比较功能修改的。

我已经尝试了我能想到的一切，但仍然无法正常工作，因此我们将不胜感激。

Answer 1

尽管所有发布的答案在技术上都是正确的，但我相信这个解决方案既不可维护也不可扩展。

您对静态元素 id 有严重依赖。

想象一下，如果将来您想添加更多这些 td执行此类验证的系统，您要跟踪新添加的行吗？虽然，从技术上讲，你可以，但从人类学上讲，它会让人精神疲惫，而类似的事情就否认了计算机和软件设计的初衷——自动化。可以让您完成创造性任务并让计算机完成机械工作的东西。

出于这个哲学原因，我相信这段代码是一个更好的解决方案。

HTML - 删除 ID 并传递 this表示当前元素(在本例中为输入)作为函数的参数。

<table>
    <tr>
        <td><input type="text" required size="3" onChange="bottomAirF(this)"></td>
        <td class="noborder"></td>
    </tr>
</table>

JS - 使用 DOM 访问器查找下一个 td并更新它的 innerHTML

function bottomAirF(elem) {
    var x, text;
    x = +elem.value; // Prepended + sign will parse whatever follows to integer.
    if (isNaN(x) || x < 33 || x > 40) {
        text = "Temp Out of Tolerance";
    } else {
        text = " ";
    }
    elem.parentNode.nextElementSibling.innerHTML = text;
}

编辑:更新的要求

添加新的验证和条件。

假设您有 3 个需要验证的文本框。每个文本框都有不同的验证参数。

First 应该只接受 1 到 10 之间的值

第二个应该只接受 11 到 33 之间的值

第三个应该只接受 33 到 41 之间的值

因此更新后的代码将是(函数名称将更改为通用名称，例如 validate )

请注意，input 上还有两个附加属性。元素即 val-min和val-max指定范围。

<table>
    <tr>
        <td><input type="text" required val-min="1" val-max="10" size="3" onChange="validate(this)"></td>
        <td class="noborder"></td>
    </tr>
    <tr>
        <td><input type="text" required val-min="11" val-max="33" size="3" onChange="validate(this)"></td>
        <td class="noborder"></td>
    </tr>
    <tr>
        <td><input type="text" required val-min="33" val-max="40" size="3" onChange="validate(this)"></td>
        <td class="noborder"></td>
    </tr>
</table>

JS代码

function validate(elem) {
    var x, text;
    x = +elem.value; // Prepended + sign will parse whatever follows to integer.
    var min = elem.getAttribute('val-min');
    var max = elem.getAttribute('val-max')
    if (isNaN(x) || x < min || x > max) {
        text = "Temp Out of Tolerance";
    } else {
        text = " ";
    }
    elem.parentNode.nextElementSibling.innerHTML = text;
}

Working Fiddle