輸入驗證只能工作一次

Question

我想創建一個腳本，將採取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> 
 

Answer 1

如果你的第一個驗證失敗（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; 
    } 

} 

Answer 2

你只有一次驗證的，因爲這樣你的邏輯裏面，如果else語句建成。

你只能去「裏面」這三條語句的一個，因爲你使用的if else如果，當你需要去裏面多的，你可以使用的序列，如果（）

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

希望這就是你要找的。請注意，我還包含兩個用於控制輸入是否有效的布爾變量。

Answer 3

刪除你的代碼中的else if條件，以表示你正在做的第二個驗證。

Answer 4

你可以使用一個標誌並檢查它的計算。

跳過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; 
}