Question

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

<input type="text" onclick="this.select()" id="2" size="45" name="2" value="http://www.youtube.com2" />

我尝试了<input type="number" min="-10" max="10" required="true" message="you can give score -10 to +10 only">但没有工作我想显示该值是否超过范围显示消息，例如您只能给予分数required = true

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

我怎么能这样做？？

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>

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

@里海还提供了一个有用的小提琴：http://jsfiddle.net/Ddk67/75/

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

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

3 个答案: