javascript - 验证两个输入字段的总和

Question

我正在尝试计算两个字段的总和并验证它们。基本上，我需要两个输入字段的值的总和大于100，并且希望在总和小于100时显示提示。

到目前为止，我有这个:

<input type="text" class="input" id="value1">
<input type="text" class="input" id="value2">

<script>
 $(document).ready(function(){
      var val1 = $("#value1").val();
      var val2 = $("#value2").val();

 });
</script>

但是，我不知道如何验证结果并在这两个输入的总和小于 100 时显示提示。

你能指出我正确的方向吗？

Answer 1

您需要使用focusout来获取实时总和，并在总和小于100时提醒用户，您也可以添加keyup事件，但这赢了没有意义，因为一旦你输入它就会开始提醒。 IMO，你应该有一个按钮，点击该按钮时，应该触发计算和验证

如果您已经在输入字段中填充了值，则只需调用/触发按钮的 focusout 或 click 事件::

$("#value1, #value2").on('focusout', function() {
  var value2 = parseInt($("#value2").val()) > 0 ? parseInt($("#value2").val()) : 0;
  var value1 = parseInt($("#value1").val()) > 0 ? parseInt($("#value1").val()) : 0
  var sumOfValues = value1 + value2;
  if (sumOfValues < 100) {
    console.log('Your sum is ' + sumOfValues + ' which is less than 100');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input" id="value1">
<input type="text" class="input" id="value2">

带按钮:

$("button").on('click', function() {
  var value2 = parseInt($("#value2").val()) > 0 ? parseInt($("#value2").val()) : 0;
  var value1 = parseInt($("#value1").val()) > 0 ? parseInt($("#value1").val()) : 0
  var sumOfValues = value1 + value2;
  if (sumOfValues < 100) {
    console.log('Your sum is ' + sumOfValues + ' which is less than 100');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input" id="value1">
<input type="text" class="input" id="value2">
<button>Calculate</button>