입력 유효성 검증은 한 번만 수행

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 (...))을 실행하지 않습니다. 예를 들어,

대신 는 서로 별도로 검증을 실행하고 모두 성공하는 경우에만 계산을 수행 else 문이있는 경우에만 내부 방식 때문에 로직을 하나 개의 검증을받을

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

세워짐. 당신이 사용하고 있기 때문에 내부에 여러 사람들을 이동해야 할 때 다른 사람, 당신은 단지의 시퀀스를 사용할 수있는 경우 경우에만, 세 개의 문 중 하나를 "내부"이동

<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

코드에서 두 번째 유효성 검사 조건을 제거하십시오.

Answer 4

플래그를 사용하여 계산을 확인할 수 있습니다.

else 부분을 건너 뛰고 대신이 플래그를 사용하십시오. -http :

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