如何以简单的形式限制密码尝试次数？答案

【问题标题】：How can I limit the number of password attempts in a simple form?如何以简单的形式限制密码尝试次数？
【发布时间】：2020-11-15 23:00:11
【问题描述】：

我正在尝试使用文本框和按钮进行 3 次尝试来制作基本的密码检查器。所以在 HTML 中，我有这两个元素和一个段落，我想在其中发布答案（正确、错误、条目不足）。

这是 HTML 代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Test page for Java.">
    <link rel="stylesheet" href="style.css">
    <title>Java Tester</title>
  </head>
  <body>

    <input id="textbox" type="text">
    <button id="button">Enter</button>
    <p id="answer"></p>

    <script src="script.js"></script>

  </body>
</html>

我在 JavaScript 中尝试使用 while 循环。我知道以下代码不起作用，因为第一次输入错误的答案会循环三次并直接进入“条目不足”。我正在想办法写这个，所以我尝试了三遍。

JavaScript 代码：

var answer = document.getElementById("answer");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var response;
var entryCount = 0;
var entryLimit = 3;
var error = false;

button.addEventListener("click", function(){

  while(textbox.value != password && !error){
    if(entryCount < entryLimit){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
    } else{
      error = true;
    }
  }

  if(error){
    answer.innerHTML = "Out of entries";
  } else{
    answer.innerHTML = "Correct Password";
  }

然而，我想如果我只是在 textbox.value=""; 下方的 while 循环中写一些随机文本，它就会开始按我想要的方式工作 - 我可以输入 3 次通行证。为什么是这样？只是为了澄清这里是有效的 JS 代码。

工作 JS 代码：

var answer = document.getElementById("answer");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var response;
var entryCount = 0;
var entryLimit = 3;
var error = false;

button.addEventListener("click", function(){

  while(textbox.value != password && !error){
    if(entryCount < entryLimit){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
      ousdgohjrandomfoihsodfhsdfhsdofihoihsoidhsdoufhouhsdfrduiiugsdf
    } else{
      error = true;
    }
  }

  if(error){
    answer.innerHTML = "Out of entries";
  } else{
    answer.innerHTML = "Correct Password";
  }

});

【问题讨论】：

它可以在没有随机文本的情况下工作。为什么你需要一个while循环你能解释一下吗？jsfiddle.net/asutosh/wra9t30L/2
第二个代码起作用的原因是它强制发生错误，从而阻止 while 循环多次运行。如答案中所述，您不需要为此使用while循环。

标签： javascript html while-loop

【解决方案1】：

响应点击事件的代码不会“暂停”并再次等待 UI 输入，因此 while 循环并不是真正需要的。您可以用 if-check 替换它，然后在成功时重置重试计数。您还可以删除 error 变量并将答案响应移动到它的位置。

我还稍微改变了逻辑，将重试计数作为第一次检查；否则即使超过重试次数，用户也可以继续猜测。

var answer = document.getElementById("answer");  
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var entryCount = 0;
var entryLimit = 3;

button.addEventListener("click", function(){
  if (entryCount < entryLimit) {
    if (textbox.value != password){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
    } else {
      // success!
      entryCount = 0;
      answer.innerHTML = "Correct Password";
    }
  } else {
      answer.innerHTML = "Out of entries";
  }
}

这是一个工作示例：

var answer = document.getElementById("answer");  
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var entryCount = 0;
var entryLimit = 3;

button.addEventListener("click", function(){
  if (entryCount < entryLimit) {
    if (textbox.value != password){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
    } else {
      // success!
      entryCount = 0;
      answer.innerHTML = "Correct Password";
    }
  } else {
      answer.innerHTML = "Out of entries";
  }
});

<input type="text" id="textbox" placeholder="Password" />
<button id="button" type="button">Login</button>

<div id="answer"></div>

【讨论】：

【解决方案2】：

第一次没有工作，因为 while 循环是不必要的。它在相同的答案上循环，直到超过错误计数。添加随机文本时，它会引发运行时错误并在第一次运行时中断循环。用一个简单的 if 替换 while 应该可以。

【讨论】：