javascript - 如何设置输入的数据最小值并在值小于最小值时设置消息

Question

我正在尝试设置输入的最小值，但消息未显示。如果需要输入并且输入的值小于最小值，如何显示此消息。我的代码是:

$(".mydiv :input").each(function () {
   var min = $(this).attr('datamin');
   if(min !== undefined && min !== null && min !== false) {
   if(value < min) {
      valid = false;
      $(this).addClass('error');
      $(this).closest('label').addClass('red');
      $(this).closest('label').html('Required min value:' + min);
   } else {
      $(this).removeClass('error');
      $(this).closest('label').removeClass('red');
   }
}

 <input datamin='1' class="required" name="order"/>
 <label for="order"><?php echo __('order'); ?><span class="red">*</span><span class="min_value" style="display:none"></span></label>

Answer 1

您需要将其附加到 change 事件，而不是在 .each 上执行。您还需要设置值(使用 .val())

围绕值进行转换和更多验证也很好(使用 isNaN)

$(document).ready(function() {
  $(".mydiv input").on('change', function() {
    var min = Number($(this).attr('datamin'));
    var value = Number($(this).val());
    if (min !== undefined && min !== null && min !== false && !isNaN(min)) {
      if (value < min || isNaN(value)) {
        valid = false;
        $(this).addClass('error');
        $(this).closest('label').addClass('red');
        $(this).closest('label').html('Required min value:' + min);
      } else {
        $(this).removeClass('error');
        $(this).closest('label').removeClass('red');
      }
    }
  })
});

.error, .red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
  <input datamin='1' class="required" name="order" />
  <label for="order">
    <?php echo __( 'order'); ?><span class="red">*</span><span class="min_value" style="display:none"></span>
  </label>
</div>