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

以表格
添加提交按钮以获取值到变量
写条件逻辑
添加输出html节点以输出结果

Answer 2

$(document).ready(function() {
  var val1 = parseInt($("#value1").val());
  var val2 = parseInt($("#value2").val());
  var sum = val1 + val2;
  
  if(sum > 100) {
    alert(sum+ ' is greater than 100')
  } else {
    alert(sum + ' is less than 100') 
  }
});

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

检查此示例。

Answer 3

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

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

＆＃13;

$("#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');
  }
});

＆＃13;

<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">

＆＃13;

使用按钮：

＆＃13;

$("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');
  }
});

＆＃13;

<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>

＆＃13;

Answer 4

dplyr::near

Answer 5

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
</head>
<body>
    <input type="text" class="input" id="value1">
    <input type="text" class="input" id="value2">
    <button type="sumbit" name="submit" id="submit">check sum</button>
    <p id="resultMessage"></p>

    <script>
    $(document).ready(function() {
        // on button pressed
        $('#submit').on('click', function() {
            var val1 = $("#value1").val();
            var val2 = $("#value2").val();

            // numeric validation
            if (!isNumeric(val1) || !isNumeric(val2)) {
                $('#resultMessage').text('Some field contains not a number');
                return;
            }

            // + operator converts input Strings to Number type
            var sum = +val1 + +val2;

            if (sum > 100) {
                // if sum greather than 100
                $('#resultMessage').text('Sum is greather than 100 (' + sum + ')');
            } else if (sum < 100) {
                // some code if sum less than 100 ...
                $('#resultMessage').text('Sum is less than 100 (' + sum + ')');
            } else {
                // sum is 100
                $('#resultMessage').text('Sum equals 100');
            }
        });

        // function for numeric validation
        function isNumeric(n) {
            return !isNaN(parseFloat(n)) && isFinite(n);
        }
    }); 
    </script>
</body>
</html>

验证两个输入字段的总和

5 个答案: