Question

我正在尝试编写一个简单的测试，我在单独的提示中询问姓名和年龄。我想验证用户确实在两个提示中都添加了一个值。在没有重复代码的情况下进行此验证的最佳方法是什么？当我单击“确定”没有值时，它不会要求我添加值
```
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”是检查“取消”按钮，但是我能够测试一下如果单击“取消”，然后再次单击“取消”，它就不会要求输入值。我该如何解决这个问题？

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来检查＆＃34; truthyness＆＃34; name。 null和空字符串都是＆＃34; falsy＆＃34;所以，!name 会为它们返回true，非空字符串是真的，所以!name会为他们返回false。

＆＃13;

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();

＆＃13;

那就是说，除非这只是一个原型或一个小的个人项目，只有你将使用，不要这样做！在循环提示中粘贴用户将挫败大多数人。大多数现代浏览器都包括“不要再向我展示这个”＃34; 复选框。我不确定如果用户检查它，浏览器会发生什么可能会继续无限循环并锁定或崩溃。

相反，最好使用页面上的表单：

＆＃13;

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

＆＃13;

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

＆＃13;

每次按下“显示信息”按钮时，它都会检查一次数据，如果有，则会对其执行某些操作;否则它什么都不做。

有一点需要注意，元素的prompt和.value属性都会返回字符串，因此如果您要使用age进行某种计算，则需要进行转换它是使用 parseInt，age = parseInt(age, 10)或unary +，age = +age;的数字。

进一步阅读：

验证多个提示具有值

3 个答案: