验证多个提示是否具有值

Question

我正在尝试编写一个简单的测试，我在单独的提示中询问姓名和年龄。我想验证用户是否真的在两个提示中都添加了值。在不复制代码的情况下进行此验证的最佳方法是什么？当我点击没有值的 "OK" 时，它不会要求我添加值
```
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.");}
}
```
此外，注意到 "null" 是检查 "Cancel" 按钮，但我能够测试如果您单击 "Cancel"，然后单击 "Cancel" 同样，它不要求一个值。我该如何解决这个问题？

Answer 1

你如果条件不对。你应该使用

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

并且如果您想连续显示 prompt 除非用户输入以下代码将起作用：

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 2

@Arshad 的回答更加清晰。

附带说明一下，|| 的原因没用是评价顺序

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

希望对您有所帮助！

Answer 3

你可以循环再问。在这里，我使用 !name 来检查 "truthyness" 个 name。 null 和一个空字符串都是 "falsy" 所以，!name 将 return true 对他们来说，非空字符串是真实的，所以 !name 将 return 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();

也就是说，除非这只是一个原型或一个只有你的个人小项目将使用，不要这样做！ 让用户陷入循环提示将让大多数人感到沮丧。大多数现代浏览器都包含 "Don't show me this again" 复选框。我不确定如果用户检查它会发生什么，浏览器可能会继续无限循环并锁定或崩溃。

最好用页面上的表格来做：

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>

每次按下“显示信息”按钮时，它都会检查一次数据，如果存在则对其进行处理；否则它什么都不做。

需要注意的一点是，元素 return 字符串的 prompt 和 .value 属性所以如果您要使用 age进行某种计算，您需要使用 parseInt, age = parseInt(age, 10) or an unary +、age = +age;.

将其转换为数字

进一步阅读：

验证多个提示是否具有值

Validate that multiple Prompts have a value

javascript

validation

alert