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

Question

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

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

我试过 required = true 但没有用 我想显示值是否超过范围显示消息，就像 你可以给分数 -10 to +10 只有

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

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

原文由 Mr world wide 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以查看我创建的这个 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();
  }
});

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

原文由 Ankit Agarwal 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 还提供了一个工作小提琴：http: //jsfiddle.net/Ddk67/75/

原文由 Katie 发布，翻译遵循 CC BY-SA 4.0 许可协议