发出大于用户使用jquery输入的值的问题

Question

当用户输入的消费数量大于库存数量时，则显示错误消息，否则不显示错误消息。

在图像中显示3小于15，因此它仍然显示错误味精，这是错误的。

如果用户在“消费数量”字段中输入11，则不会显示错误消息

问题：如果用户输入的数字是从9到2，则显示错误消息

<input id="stock_qty" type="text" name="stock_qty" value="15" style="display:none;">
<input id="consume_qty" type="text" name="consume_qty">
<span id="error" style="display: none;font-size: 12px;color: red;">Quantity has been increased.</span>

<script>
  $("#consume_qty").on('change', function() {
  if ($('#consume_qty').val() > $('#stock_qty').val()) {
            $('#error').show();
        } 
  else{
    $('#error').hide();
   }
  });
</script>

Answer 1

请在.change()处理程序上执行此检查，然后使用parseFloat()将值转换为数字。

$('#consume_qty').change(function () {  
    var stock = parseFloat($('#stock_qty').val());
    var consume = parseFloat(this.value);

    $('#error').toggle(consume > stock);
});

或者更好的是，使用jQuery验证插件并参考this post创建自定义验证方法。

Answer 2

您的代码应该可以，但是您需要通过模糊处理或着眼于输入来触发更改事件。如果要在输入输入时进行检查，请在输入事件中使用

$("#consume_qty").on('input', function() {
  if ($('#consume_qty').val() > $('#stock_qty').val()) {
    $('#error').show();
  } else {
    $('#error').hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="stock_qty" type="text" name="stock_qty" value="15" style="display:none;">
<input id="consume_qty" type="text" name="consume_qty">
<span id="error" style="display: none;font-size: 12px;color: red;">Quantity has been increased.</span>