여러 프롬프트에 값이 있음을 확인하십시오.

Question

1. 나는 별도의 프롬프트에서 이름과 나이를 묻는 간단한 테스트를 작성하려고합니다. 나는 사용자가 두 프롬프트에 실제로 값을 추가하는지 확인하고 싶습니다. 코드를 복제하지 않고이 유효성 검사를 수행하는 가장 좋은 방법은 무엇입니까? 내가 어떤 값으로 "확인"을 클릭하면 , 그것은

   function showInfo() { 
   //Asking for name in a prompt 
   var name = prompt("Name: ",""); 
   //Checking if it is null or empty 
   if (name == null || ""){alert("Please enter your name");} 
   //Same for age 
   var age = prompt("Age: ",""); 
   if (age == null || ""){alert("Please enter your age.");} 
   } 
   

2. 은 또한, "널 (null)"가 "취소"버튼을 확인하는 것입니다 것으로 나타났습니다 값을 추가달라고하지 않는다, 그러나 나는 시험 할 수 있었다 '취소'를 클릭하고 '취소'를 다시 클릭하면 값을 묻지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

다시 묻기 위해 루프에 넣을 수 있습니다. 여기에서 을 사용하여 name 인 "진실성"을 확인합니다. null과 빈 문자열은 그들 모두 "falsy"그래서, !name 그들을 위해 true를 반환합니다, 비어 있지 않은 문자열 truthy, 그래서 !name 것이다 반환 false 있습니다.

function ask (msg, errMsg) { 
 
    var name; 
 
    do { 
 
    name = prompt(msg); 
 
    //Checking if it is null or empty 
 
    if (!name) { 
 
     alert(errMsg); 
 
    } 
 
    
 
    } while (!name); 
 
    return name; 
 
} 
 

 
function showInfo() { 
 
    var name, 
 
    age; 
 
    name = ask("Name:", "Please enter your name"); 
 
    age = ask("Age:", "Please enter your age."); 
 
} 
 

 
showInfo();

이것은 단지 프로토 타입 또는 당신은 사용, 이이 방법을 사용하지 않는 단지 작은 개인 프로젝트가 아닌 말했다

! 루프 프롬프트에서 사용자를 붙이면 은 대부분의 사람들을 좌절시킵니다. 대부분의 최신 브라우저에는 "다시 표시하지 않음" 확인란이 포함됩니다. 나는 사용자가 그것을 확인하면 무슨 일이 일어날 지 확신하지 못한다. 브라우저 은 무한 루프를 계속하고 잠금 또는 충돌 할 수있다. 대신

는 페이지의 양식을 할 더 나은 것 : 다음

var elShowInfo = document.getElementById('show-info'), 
 
    elName = document.getElementById('name'), 
 
    elAge = document.getElementById('age'), 
 
    elOut = document.getElementById('output'); 
 

 
function showInfo (ev) { 
 
    // stop the form from submitting 
 
    ev.preventDefault(); 
 
    
 
    var name = elName.value, 
 
    age = elAge.value; 
 
    if (name && age) { 
 
    // do something with name/age 
 
    elOut.textContent = name + ' is ' + age + ' years old.'; 
 
    } 
 
} 
 

 
elShowInfo.addEventListener('click', showInfo, false);

<form> 
 
<label for="name">Name:</label> <input id="name" placeholder="Please enter your name"> 
 
<label for="age">Age:</label> <input id="age" placeholder="Please enter your age"> 
 
<button id="show-info">Show info</button> 
 
</form> 
 
<div id="output"></div>

한번 데이터를 확인하는 정보보기 버튼을 누를 때마다하고 무언가를 그곳에 있으면 그걸로. 그렇지 않으면 아무것도하지 않습니다.

것은 모두 prompt 및 요소 반환 문자열의 .value 속성은 당신이 숫자 중 하나 parseInt, age = parseInt(age, 10) 또는를 사용하여 변환해야합니다 계산의 일종을 할 age를 사용하려는 경우, 그래서주의해야 unary +, age = +age;.

추가 읽기 :

• Truthy and Falsy: When All is Not Equal in JavaScript
• Introduction to the DOM

Answer 2

조건이 잘못되었을 때입니다. 당신은 사용자가 입력하지 않는 한 continusly prompt을 보여 싶은 경우에 당신은 코드 아래에 입력이 작동

if (name === null || name === "") { 
    //you code here 
} 

를 사용한다 :

function showInfo() { 
 

 
while(1) { 
 
//Asking for name in a prompt 
 
var name = prompt("Name: ",""); 
 
if (name === null || name === ""){alert("Please enter your name");} 
 
else break; 
 
} 
 

 
console.log("Name= "+name); 
 

 

 
while(1) { 
 
//Same for age 
 
var age = prompt("Age: ",""); 
 
//Checking if it is null or empty 
 
if (age === null || age === ""){alert("Please enter your age.");} 
 
else break; 
 
} 
 
console.log("Age ="+age); 
 
} 
 
showInfo();

Answer 3

@Arshad의 대답은 더 선명도를 추가합니다.

사이드 노트에서 || 작동하지 않았다 평가의 순서입니다.

if (age == null || "") --> evaluated as 
if ((age == null) || "") --> true on Cancel, false on Ok 

희망이 있습니다.