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

Question

我有两个输入数字（最小和最大）。有没有办法阻止用户插入像min> max这样的值？

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

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

Answer 1

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

一种选择是每当分钟发生变化时，如果它是大于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，以及如何将其用于form validation。

Answer 2

您可以使用参数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部分来实现。

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

Answer 3

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

，您可以尝试there