Question

我正在使用jQuery来防止在输入中输入错误的数字。就我而言，.val()函数无法检测到数字0。当我在输入2、5、3中书写时，它可以工作，但是对于2、500、30中它却不能。

$(document).ready(function() {
  $('#desire_point').on('change', function() {
    if (this.value < $('#min_value').val()) {
      $('#desire_point').addClass('is-invalid')
      $('#btnSbmt').attr('disabled', true)
    } else if (this.value > $('#max_value').val()) {
      $('#desire_point').addClass('is-invalid')
      $('#btnSbmt').attr('disabled', true)
    } else if (this.value < $('#max_value').val()) {
      $('#desire_point').removeClass('is-invalid')
      $('#btnSbmt').attr('disabled', false)
    } else if (this.value > $('#min_value').val()) {
      $('#desire_point').removeClass('is-invalid')
      $('#btnSbmt').attr('disabled', false)
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input class="form-control" id="min_value" type="number">
<input class="form-control" id="max_value" type="number">
<input class="form-control" id="desire_point" type="number">
<input class="form-control" id="btnSbmt" type="submit">

Answer 1

$(document).ready(function() {
  $('#desire_point').on('change', function() {
    if (+this.value < +$('#min_value').val()) {
      $('#desire_point').addClass('is-invalid')
      $('#btnSbmt').attr('disabled', true)
    } else if (+this.value > +$('#max_value').val()) {
      $('#desire_point').addClass('is-invalid')
      $('#btnSbmt').attr('disabled', true)
    } else if (+this.value < +$('#max_value').val()) {
      $('#desire_point').removeClass('is-invalid')
      $('#btnSbmt').attr('disabled', false)
    } else if (+this.value > +$('#min_value').val()) {
      $('#desire_point').removeClass('is-invalid')
      $('#btnSbmt').attr('disabled', false)
    }
  });
});

Answer 2

您可以尝试这种方式

$(document).ready(function() {
    // By default the button is disabled
  $('#btnSbmt').attr('disabled', true)
  // Chaged to keyup from chage - to make it realtime - you may want to change it back based on your use case
  $('#desire_point').on('keyup', function() {

      // Declare vars and set datatype
      var desiredVal = parseInt(this.value);
      var minVal = parseInt($('#min_value').val());
      var maxVal = parseInt($('#max_value').val());
      // Changed the way you are working out the val
      if (desiredVal >= minVal & desiredVal <= maxVal) {
        $('#btnSbmt').attr('disabled', false);
      } else {
        $('#btnSbmt').attr('disabled', true);
      }
    });
});

Answer 3

或者，如果您不想将输入限制为整数，则可以这样做：

$('#btnSbmt').attr('disabled',true)
$('#desire_point').on('keyup', function() {
  var inv = +this.value;
  inv=inv<+$('#min_value').val()
   || inv>+$('#max_value').val();
  $('#btnSbmt').attr('disabled',inv);
  $(this).toggleClass('is-invalid',inv);
});

.is-invalid {color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input class="form-control" id="min_value" type="number">
<input class="form-control" id="max_value" type="number">
<input class="form-control" id="desire_point" type="number">
<input class="form-control" id="btnSbmt" type="submit">

.val（）函数未检测到零

3 个答案: