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

Question

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

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

<div id"button"></div>

需要知道输入是否在 0,5 和 8 之间（所以我有 int 和 float，你可以理解）。

所以值必须是 >= 0,5 和

如果输入值介于 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/

Answer 2

输入字段的

.val() 是一个字符串，您必须将其转换为数字才能通过 >=、id"button"

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="volume" class="form-control" name="voilume"/>

<div id="button"></div>

<button onclick="go()">run</button>

Answer 3

当输入包含逗号,时可能会出现问题 所以"0,5" >= 0.5 将返回false 和parseFloat("0,5") 将返回0。

您需要将, 替换为.

Answer 4

下面的方法会起作用。

<input type="text" id="myTextField" onblur="change()"/>
<input type="submit" id="byBtn" value="" />

JavaScript

function change() {
        var myTextbox = document.getElementById('myTextField').value;
        var button = document.getElementById('byBtn');
        if (parseFloat(myTextbox) >= 0.5 && parseFloat(myTextbox) <= 8) {
            button.value = "OK";
        } else {
            button.value = "";
        }
    }

Answer 5

您需要将字符串值解析为整数。为此使用 parseInt()。
它会将字符串解析为整数。

替换这个：

var input= $('#volume').val();

通过

var inputval= parseInt($('#volume').val());