输入验证只工作一次

Input validation only working once

本文关键字：一次 验证 工作 输入      更新时间：2023-09-26

我试图创建一个脚本，将采取2个输入和计算总和。我希望在计算发生之前验证两个输入-输入必须在0到10之间。

然而，当我在两个字段(例如50)中输入超过10的值时，我只得到一个验证错误，而不是两个。

怎么了?

     function calc() {
    var x, y, z, text1, text2;   
    // Get the value of the input field with id="numb"
       x = Number(document.getElementById("val01").value);
       y = Number(document.getElementById("val02").value);
       // If x is Not a Number or less than one or greater than 10
       if (isNaN(x) || x < 0 || x > 10) {
         text1 = "Input not valid";
         document.getElementById("validation1").innerHTML = text1;
       } else if (isNaN(y) || y < 0 || y > 10) {
         text2 = "Input not valid";
         document.getElementById("validation2").innerHTML = text2;
       } else {
         z = x + y;
         document.getElementById("total").innerHTML = z;
       }
     }
  
    
    <p>Please input a number between 0 and 10:</p>
    
    1st number:<input id="val01" required> <b id="validation1"></b> <br> 
    2nd Number:<input id="val02" required> <b id="validation2"></b> <br>
    <button onclick="calc()">click</button><br /> sum = <span id="total">0</span>

您可以使用一个标志并检查它的计算。

跳过else部分，使用标志代替。

var ok = true;
if (isNaN(x) || x < 0 || x > 10) {
   ok = false;
   text1 = "Input not valid";
   document.getElementById("validation1").innerHTML = text1;
}
if (isNaN(y) || y < 0 || y > 10) {
   ok = false;
   text2 = "Input not valid";
   document.getElementById("validation2").innerHTML = text2;
} 
if (ok) {
    z = x + y;
    document.getElementById("total").innerHTML = z;
}

如果第一次验证失败(if (...))，则不再执行第二次验证(else if (...))。

相反，分别运行两个验证，并且只有当两个验证都成功时才进行计算，例如:

function calc() {
    var x, y, z, text1, text2;
    // Get the value of the input field with id="numb"
    x = Number(document.getElementById("val01").value);
    y = Number(document.getElementById("val02").value);
    var valid = true;
    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 0 || x > 10) {
        text1 = "Input not valid";
        document.getElementById("validation1").innerHTML = text1;
        valid = false;
    }
    if (isNaN(y) || y < 0 || y > 10) {
        text2 = "Input not valid";
        document.getElementById("validation2").innerHTML = text2;
        valid = false;
    }
    if(valid) {
        z = x + y;
        document.getElementById("total").innerHTML = z;
    }
}

由于if else语句内部的逻辑构建方式，您只能获得一次验证。

你只进入三个语句中的一个，因为你使用if else if，当你需要进入多个语句时，你可以使用if()

的序列
<script>
function calc() {
var x, y, z, text1, text2;   
// Get the value of the input field with id="numb"
   x = Number(document.getElementById("val01").value);
   y = Number(document.getElementById("val02").value);
   var invalidX = true;
   var invalidY = true;
   // If x is Not a Number or less than one or greater than 10
   if (isNaN(x) || x < 0 || x > 10) {
     invalidX = false;
     text1 = "Input not valid";
     document.getElementById("validation1").innerHTML = text1;
   }
   if (isNaN(y) || y < 0 || y > 10) {
     invalidY = false;
     text2 = "Input not valid";
     document.getElementById("validation2").innerHTML = text2;
   } 
   if (invalidX && invalidY) {
     z = x + y;
     document.getElementById("total").innerHTML = z;
   }
 }
</script>

希望这就是你要找的。注意，我还包含了两个布尔值变量，它们控制输入是否有效。

删除代码中用于第二次验证的else if条件

相关文章：