使用最小和最大范围进行数字输入类型的验证

Question

我想验证输入类型为数字的值是否超出了范围。

<input type="number" min="-10" max="10"  required="true" message="you can give score -10 to +10 only">

我尝试了required = true，但不起作用，我想要的是，在值超出范围时显示消息，例如：您只能给分数-10到+10

我希望在输入时就允许，而不是在提交时才允许。

我该怎么做呢..？

- Mr world wide

Answer 1

你可以查看我创建的这个jsfiddle。HTML内容如下：

<input id="txtNumber" type="number" message="you can give score -10 to +10 only" />
<span id="errorMsg" style="display:none;">you can give score -10 to +10 only</span>

Jquery

$("#txtNumber" ).keyup(function() {
  if($('#txtNumber').val()<-10 || $('#txtNumber').val()>10 ){
      $('#errorMsg').show();
  }
  else{
    $('#errorMsg').hide();
  }
});

如果您想将输入控件设为必填项，可以添加必填字段。

- Ankit Agarwal

Answer 2

你可以从元素中获取最大值和最小值并检查它是否在范围内，而不是在函数中硬编码 "10" 和 "-10"。

$(function () {
   $( "input" ).change(function() {
   var max = parseInt($(this).attr('max'));
   var min = parseInt($(this).attr('min'));
   if ($(this).val() > max)
   {
      $(this).val(max);
   }
   else if ($(this).val() < min)
   {
      $(this).val(min);
   }       
 }); 
});

@Caspian还提供了一个可工作的fiddle示例：http://jsfiddle.net/Ddk67/75/

- Katie

---

我认为除了change事件之外，您还应该连接keyup事件。否则，可能会手动输入超过最大值或低于最小值的值，而没有任何更正或调整。 - hynsey

Answer 3

这是使用原生JavaScript的方法。

document.querySelector('input').addEventListener('input', e=>{
  const el = e.target || e

  if(el.type == "number" && el.max && el.min ){
    let value = parseInt(el.value)
    el.value = value // for 000 like input cleanup to 0
    let max = parseInt(el.max)
    let min = parseInt(el.min)
    if ( value > max ) el.value = el.max
    if ( value < min ) el.value = el.min
  }
});

<input type="number" min="-10" max="10"  required="true" title="you can give score -10 to +10 only">

- Abdullah Arık

---

我喜欢你的方法，展示反向值作为验证。 - Mr world wide

无法使用键盘输入负号。 - Bosz

Answer 4

$(document).on('change', 'input', function() {
    var max = parseFloat($(this).attr('max'));
    var min = parseFloat($(this).attr('min'));
    if (parseFloat($(this).val()) > max) {
        $(this).val(max);
    } else if (parseFloat($(this).val()) < min) {
        $(this).val(min);
    }
});

- konstantin k

---

在代码中加入注释或额外的解释可以帮助理解你的代码所做的事情。 - hyperupcall