javascript - 如何限制html文本字段中数字的最大值和最小值

Question

我有一个允许用户输入数字的文本字段，最大长度应为 2，最大值应为 31，最小值应为 1我能够满足前 2 个条件，但不知道后 2 个条件

有人能帮帮我吗？

<input type="text"  name = "ccdate" class="form-control" maxlength="2" onkeypress="return isNumber(event)" >


function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

注意 我不想使用 HTML5 input type="number"

Answer 1

试试这个(纯 Jquery 方法):

HTML:

<input type="text"  name = "ccdate" class="form-control" maxlength="2">
<div id="div1"></div>

JQUERY:

$('[name="ccdate"]').keyup(function(){
  if(parseInt($(this).val()) > 31){
    $('#div1').html('value cannot be greater then 31');
    $(this).val('');
  }
  else if(parseInt($(this).val()) < 1)
  {
    $('#div1').html('value cannot be lower then 1');
    $(this).val('');
  }
  else
  { $('#div1').html(''); }
});

Working Demo

---

编辑:-(根据提问者评论检查用户输入的字符串或数字):

$('[name="ccdate"]').keyup(function(){
  if(isNaN($(this).val()))
   {
    $('#div1').html('entered string');
    $(this).val('');
   }
  else if(parseInt($(this).val()) > 31){
    $('#div1').html('value cannot be greater then 31');
    $(this).val('');
  }
  else if(parseInt($(this).val()) < 1)
  {
    $('#div1').html('value cannot be lower then 0');
    $(this).val('');
  }
  else
  { $('#div1').html(''); }
});

Working Demo

---

编辑:-(纯 Javascript 方法)(只需为您的文本框提供一个唯一的 id 说 't1')

document.getElementById('t1').addEventListener('keyup', function(){
this.value = (parseInt(this.value) < 1 || parseInt(this.value) > 31 || isNaN(this.value)) ? "" : (this.value)
});

Working Demo