在输入类型=数字上防止最小值>最大值

Question

我有两个输入数字（最小和最大）。 有没有一种方法可以防止用户插入诸如min> max的值？

<input type="number" class="inputMin" placeholder="Min.">

<input type="number" class="inputMax" placeholder="Max.">

Answer 1

您可以通过多种不同的方式来执行此操作。

一种选择是每当更改min时，如果它大于max，则将其更改为等于max，如下所示：

$('.inputMin').on('change', function() {
    var max = parseFloat($('.inputMax').val());                                     
    var min = parseFloat($('.inputMin').val());
    if (min > max) {
        $('.inputMin').val(max);
    }
});

或相反，当您更改max时：

$('.inputMax').on('change', function() {
    var max = parseFloat($('.inputMax').val());                                     
    var min = parseFloat($('.inputMin').val());
    if (min > max) {
        $('.inputMin').val(max);
    }
});

另一个选择是在提交表单时显示错误，或者在用户更改输入时动态显示错误。

有许多JavaScript库可让您非常轻松地进行动态验证。 查看Angular.js ，以及如何将其用于表单验证 。

Answer 2

没有JQuery，您可以尝试以下操作：

（并且您必须将class更改为id ）

var min = document.getElementById("inputMin");
var max = document.getElementById("inputMax");

function check() {
    if (min.value > max.value) {
        min.value = max.value;
    }
};

min.addEventListener("input", check, false);
max.addEventListener("input", check, false);

你可以在那里尝试

Answer 3

您可以使用参数min和max例如：

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

参考： http : //www.w3schools.com/html/html_form_input_types.asp （输入类型：数字）

您也可以使用Javascript来检查值是否为>= min_number和<= max_number ，但这两者都是客户端脚本，可以通过编辑html部分来绕过它们。

您还需要服务器端检查，以确保它在范围内。