javascript - 检查输入是否在两个 int 或 float 之间然后显示或不显示内容

Question

在 javascript 中，我需要检查用户在 html 输入中输入的 whiwh 值，如下所示:

<input type="text" id="volume" class="form-control" name="voilume"></input>

<div id"button"></div>

我需要知道输入是否在 0.5 和 8 之间(所以我有 int 和 float，你可以理解)。

因此该值必须是 >= 0,5 和 <= 8

如果输入的值介于 0,5 和 8 之间，我必须显示一个按钮，否则无事可做。但是我需要防止用户多次更改该值。

因此，如果他输入 3，则在 div id=button"中显示一个按钮"，如果它更改为另一个值(例如 2)，则继续显示该按钮，但如果他将值输入更改为 100，我需要删除 div id 中的按钮="按钮"。

现在我尝试了这样的事情来测试它是否有效:

var input= $('#volume').val();
    if (input >= 0.5 && input <= 8) {
        $('#button').html('ok');
    } else {
      $('#button').empty();
    }

但它不起作用。

Answer 1

您可以在这里稍微利用一下 CSS 约束验证。在我看来，这就像一个 X/Y 问题。实际上，我们可以为这个 <input> 设置我们的min、max 和step 值。元素，然后让浏览器进行验证:

<input type="number" min="0.5" max="8" step="0.1" required id="volume" class="form-control" name="voilume">

除此之外，我们还可以使用伪 css 选择器 :valid和 :invalid像这样:

input:valid~div#button {
  display: block;
}

input:invalid~div#button {
  display: none;
}

这会产生这样的效果，如果我们在输入控件中输入一个有效值，就会显示该按钮。如果没有，该按钮将消失。魔法!

示例:https://jsfiddle.net/4q1fjqwp/