验证输入类型编号的最小和最大范围

Question

我想验证输入类型编号是否超出范围。

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

我试过required = true但不工作我想显示值是否越过范围显示消息就像你只能给分数-10 to +10

我想在输入时允许，而不是在提交时允许。

我怎样才能做到这一点..？

Answer 1

您可以从元素中获取最小值和最大值并检查它是否在范围内，而不是在函数中硬编码“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 还提供了一个工作小提琴： http : //jsfiddle.net/Ddk67/75/

Answer 2

您可以查看我创建的这个 jsfiddle。 https://jsfiddle.net/6bkws7zd/

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>

查询

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

如果您想让它成为必需的，您可以将必填字段添加到输入控件中。

Answer 3

这是香草js的方式。

 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">