演示

Question

我让用户在字段中输入数字，而我正在尝试验证数字范围内的数字输入。

我在用户键入时使用keyup()来获取值，我认为问题是，当用户在0之后直接键入3时，jQuery jQuery将数字设置为30。这就是为什么{{1 }}会在我每次按下数字时触发。

我该如何解决？

这是我的代码：

alert()

Answer 1

您的布尔逻辑已关闭，这将使if条件始终为true。 ||是一个OR，表示两个条件之一必须为真。现在试着想一个数字，哪一个都不成立：您看到问题了吗？

您想要的是相反的：检查数字是否在有效范围内：

if (parsed_val <= 0 || parsed_val > 30) {
   alert('your number should be between 1 and 30');
}

Answer 2

其他答案很好，但是我想我会向您展示一种使用一点通用代码在多个数字输入上创建验证的方法。通过添加类max，您可以创建min和.validation-numerical属性并将其用作限制，然后脚本将检查多个输入。

下面的脚本允许您添加带有错误消息的跨度，该跨过错误消息显示在无效输入中，或仅对输入文本使用颜色反馈。

演示

// Add keyup event to all validation-numerical inputs
$("input.validation-numerical").on('keyup', function() {

  // Get value of input, max and min
  var current = $(this).val();
  var min = parseInt($(this).attr("min"));
  var max = parseInt($(this).attr("max"));

  // Compare the max and min with the current value
  // Using && to require both statements to be true
  if (current > min && current <= max) {
  
    // Switch classes for parent wrapper if it matches
    $(this).parent(".input-wrapper.validate").addClass("valid").removeClass("invalid");
    // Add validation classes to input itself
    $(this).addClass("valid").removeClass("invalid");

  } else {
  
    // Switch classes for parent wrapper if it matches
    $(this).parent(".input-wrapper.validate").addClass("invalid").removeClass("valid");
    // Add validation classes to input itself
    $(this).addClass("invalid").removeClass("valid");
    
  }


});

.validation-numerical {
  transition: 0.3s all;
}

.valid {
  color: black;
}

.invalid {
  color: red;
}

.validation-error {
  height: 0px;
  overflow: hidden;
  transition: 0.3s all;
  opacity: 0;
}

.invalid > .validation-error {
  opacity: 1;
}

label {
  width: 100%;
  display: inline-block;
  margin-bottom: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <label>Validation with message and wrapper (0-30)</label>
  <div class="input-wrapper validate">
    <input id="degress" class="validation-numerical" min="0" max="30">
    <span class="validation-error" for="degrees">Must be between 0 and 30.</span>
  </div>

  <hr>


  <label>Validation with message and wrapper (5-15)</label>
  <div class="input-wrapper validate">
    <input id="degress" class="validation-numerical" min="5" max="15">
    <span class="validation-error" for="degrees">Must be between 5 and 15.</span>
  </div>

  <hr>

  <label>Validation with color only (0-30)</label>
  <input id="degress" class="validation-numerical" min="0" max="30">

</div>

Answer 3

jQuery运行良好，您只需要调整您的条件即可。您只想在数字大于30或小于0时触发警报。

function from_south(val) {
    var parsed_val = parseInt(val)
    if (parsed_val > 30 || parsed_val < 0) {
        alert('between 0-30');
    }
}

$('.deviation-south').on('keyup', function() {
    var degree = $(this).val()    
    from_south(degree);
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<form>
  <input type="number" placeholder="input number (0-30)" class="deviation-south">
</form>

如何验证来自击键事件的数字间隔？

3 个答案:

演示