Question

我的表单增加了6个用户输入。如果总数不是100或者用户输入的数字不是数字，我想要发出警报。警报的总计大于100，但是如何检查它是否小于100并且所有输入都已填写？现在我在填写第一个输入时收到警报。

<form name="myForm" id="form1">
                      <input oninput="findTotal()" type="text" name="qty" id="qty1" /> <br>
                     <input oninput="findTotal()" type="text" name="qty" id="qty2" /><br>
                     <input oninput="findTotal()" type="text" name="qty" id="qty3" /><br>
                      <input oninput="findTotal()" type="text" name="qty" id="qty4" /> <br>
                      <input oninput="findTotal()" type="text" name="qty" id="qty5" /><br>
                     <input oninput="findTotal()" type="text" name="qty" id="qty6" /><br>


                    <textarea type="text" name="total" id="total" min="100" max="100" readonly></textarea>  
              </form>



    <script>
        function findTotal(){
                "use strict";
                var arr = document.getElementsByName('qty');
                var tot=0;
                for(var i=0;i<arr.length;i++){
                    if(parseInt(arr[i].value)) {
                        tot += parseInt(arr[i].value);

                    }
                }

                document.getElementById('total').value = tot;

                if (tot > 100) {            
                alert("Please make sure numbers total 100");
                document.getElementById("qty1").value = null;
                document.getElementById("qty2").value = null;
                document.getElementById("qty3").value = null;
                document.getElementById("qty4").value = null;
                document.getElementById("qty5").value = null;
                document.getElementById("qty6").value = null;
                document.getElementById("total").value = null;
                return false;
            }

        if (tot < 100) {            
                alert("Please make sure numbers total 100");
                document.getElementById("qty1").value = null;
                document.getElementById("qty2").value = null;
                document.getElementById("qty3").value = null;
                document.getElementById("qty4").value = null;
                document.getElementById("qty5").value = null;
                document.getElementById("qty6").value = null;
                document.getElementById("total").value = null;
                return false;
            }

            }
        </script>

Answer 1

要达到预期效果，请使用以下选项
1.使用onkeyup功能检查输入是否为数字
2.使用if（tot> 100）条件检查大于100的值 3. if（tot <100）条件检查值小于100并且警告放在最后一个字段上以避免在每个字段上发出警报
4.如果满足条件，则清除值

HTML：

<form name="myForm" id="form1">
  <input oninput="findTotal()" type="text" name="qty" id="qty1" onkeyup="checkinput(this)" /> <br>
  <input oninput="findTotal()" type="text" name="qty" id="qty2" onkeyup="checkinput(this)" /><br>
  <input oninput="findTotal()" type="text" name="qty" id="qty3" onkeyup="checkinput(this)" /><br>
  <input oninput="findTotal()" type="text" name="qty" id="qty4" onkeyup="checkinput(this)" /> <br>
  <input oninput="findTotal()" type="text" name="qty" id="qty5" onkeyup="checkinput(this)" /><br>
  <input oninput="findTotal()" type="text" name="qty" id="qty6" onkeyup="checkinput(this)" /><br>


  <textarea type="text" name="total" id="total" min="100" max="100" readonly></textarea>
</form>

JS：

function findTotal() {
  "use strict";

  var arr = document.getElementsByName('qty');
  var tot = 0;
  for (var i = 0; i < arr.length; i++) {
    if (parseInt(arr[i].value)) {
      tot += parseInt(arr[i].value);

    }
  }

  document.getElementById('total').value = tot;
  if (tot > 100) {
    alert("Please make sure numbers total 100");
    for (i = 0; i < arr.length; i++) {
      arr[i].value = null;
    }
  }

  if (tot < 100 && arr[5].value) {
    alert("Please make sure numbers total 100");
    for (i = 0; i < arr.length; i++) {
      arr[i].value = null;
    }
  }

}

function checkinput(x) {
  var y = x.value

  var regex = /^[0-9]+$/;
  if (y.match(regex)) {} else {
    alert("Enter number");
    x.value = '';
  }

}

Codepen- equals()

Answer 2

您的代码已被删除，但您知道这一点：

if (tot > 100) {
    alert("Please make sure numbers total 100"); 
    return false; 
}
if (tot < 100) { 
    alert("Please make sure numbers total 100"); 
    return false; 
}

与写这个相同：

if(tot !== 100) {
    alert("Please make sure numbers total 100"); 
    return false;
}

编辑：

这是因为您的事件在oninput事件上触发，每次用户键入时都会触发该事件。使用提交表单时触发的on submit事件。确保阻止默认操作。评论这是否对您没有帮助。

Answer 3

您可以解决此问题的一种方法是，如果无法将所有输入解析为整数，则退出程序。如果可以将默认值解析为int，则可能需要添加特殊情况。编辑：当用户输入非整数值时，只需将“return false”替换为您想要发生的任何内容。

for(var i=0;i<arr.length;i++){
   if(parseInt(arr[i].value)) {
       tot += parseInt(arr[i].value);

    }
    else{
        return false;
    }
}

验证文本区域中的输入总和

3 个答案:

编辑：