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

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

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

超文本标记语言

<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();
  }
});

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

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/