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

Prevent min > max values on input type=number

本文关键字：最小值 最大值 数字 输入 类型      更新时间：2023-09-26

我有两个输入数字（最小和最大）。有没有办法防止用户插入最小值>最大值等值？

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

许多不同的方法可以做到这一点。

一个选项是每当更改最小值时，如果它大于最大值，则将其更改为等于最大值，如下所示：

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

或更改最大值时的相反情况：

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

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

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

没有 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);

你可以在那里尝试一下

您可以使用

参数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 部分来绕过。

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

相关文章：