JAVASCRIPT-如何使一个函数在三次输入错误密码时工作？

为一个学校项目做这件事。我们的任务是在没有服务器的情况下创建一个工作日志。我已经完成了大部分工作，但是表单还有一个要求。仅使用HTML、Javascript和CSS

要求是，当用户三次输入不正确的用户名/密码时，应出现警报并锁定页面

请帮忙

这是我目前的代码：

函数enterUsername（）{
var x=document.forms[“myForm”][“fname”].value；
如果（x==“”）{
警告（“必须填写姓名”）；
返回false；
}
}
函数inputPass（）{
var x=document.forms[“myForm”][“pword”]值；
如果（x==“”）{
警报（“必须填写密码”）；
返回false；
}
}
函数enterPassword（）{
var password=document.getElementById（“pword”）.value；
var username=document.getElementById（“fname”）.value；
如果（密码==“你好”&&username==“1234”）{
window.location=“project mainframe.html”；
返回true；
}
else if（密码！=“你好”&&username！=“1234”）{
警报（“用户名或密码不正确”）；
返回false；
}
}
函数timeAlert（）{
警报（“您的时间限制已过。”+“\n”+“请刷新页面重试。”）；
window.location=“project.html”
}

正文{
背景：url（“backgroundimg.jpg”）；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
div.login{
边界：无；
左边框：1px；
}
输入[类型=文本]，选择{
宽度：100%；
填充：14px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=密码]，选择{
宽度：100%；
填充：14px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=提交]{
宽度：40%；
背景色：#1a1aff；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：#0000e6；
}
输入[类型=重置]{
宽度：40%；
背景色：红色；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=重置]：悬停{
背景色：#e60000；
}
内分区{
背景色：#f1f3f2；
填充：20px；
宽度：470px；
}

登录表格









登录

好的，基本上，您可以使用for循环来重复某些内容。使用循环进行检查，有一件事是使用for循环，而不是forEach。所以，当var x=3时，运行一些代码。在表单中循环。 这也会清除代码

希望有帮助，

---

Sami不是从客户端阻止用户的好做法，这种验证是由服务器端驱动的

但要回答您的问题，您可以对每个无效登录使用计数器。（参见下面的代码片段）

var计数器=0；
函数enterUsername（）{
var x=document.forms[“myForm”][“fname”].value；
如果（x==“”）{
警告（“必须填写姓名”）；
返回false；
}
}
函数inputPass（）{
var x=document.forms[“myForm”][“pword”]值；
如果（x==“”）{
警报（“必须填写密码”）；
返回false；
}
}
函数enterPassword（）{
var password=document.getElementById（“pword”）.value；
var username=document.getElementById（“fname”）.value；
如果（密码==“你好”&&username==“1234”）{
window.location=“project mainframe.html”；
返回true；
}
else if（密码！=“你好”&&username！=“1234”）{
计数器++；
警报（“用户名或密码不正确”）；
返回false；
}
}
函数timeAlert（）{
警报（“您的时间限制已过。”+“\n”+“请刷新页面重试。”）；
window.location=“project.html”
}
函数checkUserIFisBlock（）{
如果（计数器>2）{
警报（“用户被阻止”）；
返回false；
}
返回true；
}

正文{
背景：url（“backgroundimg.jpg”）；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
div.login{
边界：无；
左边框：1px；
}
输入[类型=文本]，选择{
宽度：100%；
填充：14px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
输入[类型=密码]，选择{
宽度：100%；
填充：14px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
<div class="container">
  <div class="login-container">
    <form method="GET" action="#" id="login-form">
      <div class="content-wrapper">
        <h3>Login</h3>
      </div>
      <div class="element-wrapper">
        <input type="text" name="username" class="field field-text" placeholder="Username" />
      </div>
      <div class="element-wrapper">
        <input type="password" name="password" placeholder="Password" class="field field-password" />
      </div>
      <div class="element-wrapper button-wrapper">
        <input type="submit" class="button button-submit" value="Submit" />
        <input type="reset" class="button button-reset" value="Reset" />
      </div>
    </form>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.container {
  background-color: #f1f3f2;
  max-width: 480px;
  padding: 20px;
  margin: 30px auto;
  border-radius: 5px;
}

.field {
  width: 100%;
  padding: 12px 8px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.button {
  color: #fff;
  padding: 12px 26px;
  cursor: pointer;
  border: 0;
  margin: 10px;
  width: 50%;
  text-shadow: 0px 1px 1px #000000;
  background-clip: text;
  font-weight: bold;
}

.button.button-submit {
  background-color: #4b4bff;
  margin-left: 0px;
  border-bottom: 5px solid #1c1c65;
}

.button.button-submit:hover,
.button.button-submit:focus {
  background-color: #7878f9;
  border-color: #4b4bff;
  color: #dcdcdc;
}

.button.button-reset {
  background-color: #ff3737;
  margin-right: 0px;
  border-bottom: 5px solid #d40c0c;
}

.button.button-reset:hover,
.button.button-reset:focus {
  background-color: #ff7777;
  border-color: #ff3737;
  color: #dcdcdc;
}

.button-wrapper {
  display: flex;
}

body {
  background: transparent;
}

*,
html,
body {
  font-family: 'Open Sans', sans-serif;
}

(function() {
  window.onload = function() {
    setTimeout(function() {
      alert("Your time limit has run out.\nPlease refresh the page to try again.");
      attempts = 0;
    }, 6000);
  };

    // counter counting number of attempts
  var attempts = 2;

  // messages to display in case of success / errors
  var messages = {
    "exceededAttempts": "You have exceeded the number of attempts to Log in.\nPlease try again later.",
    "missingUsername": "Please check the username field and try again",
    "missingPassword": "Please check the password field and try again",
    "missingFields": "Please check the form and try again",
    'success': "Login Success",
    'fail': "Login Failed"
  };

  // form elements

  var form = document.getElementById("login-form");
  var usernameField = document.getElementsByName("username")[0];
  var passwordField = document.getElementsByName("password")[0];
  var submitButton = document.getElementsByClassName("button-submit")[0];

    // valid credentials

  var validCredentials = {
    "username": "admin",
    "password": "admin"
  };

    /**
  * @function login
  * authenticates the user
  */
  function login() {
    // check if user is within allowed attemption limit
    if (attempts > 0) {
        // username and password value
      var username = usernameField.value;
      var password = passwordField.value;

            // if username or password is blank
      if (username === "" || password === "") {
        // if username and password ARE blank
        if (username === "" && password === "") {
          alert(messages.missingFields);
        } else {
            // if only username is blank
          if (username === "") {
            alert(messages.missingUsername);
          } else if (password === "") {
            // if only password is blank
            alert(messages.missingPassword);
          }
        }
      } else {
        // the form is filled and username and password are as     expected
        if (username === validCredentials.username && password === validCredentials.password) {
          alert(messages.success);
        } else {
            // the username and password are not as expected
          alert(messages.fail);
        }
      }
      // count down number of attempts
      attempts--;
    } else {
        // notify user that he/she is out of attempts
      alert(messages.exceededAttempts);
    }
  };

  // when form is submitted
  form.onsubmit = function(e) {
    // stop default behaviour
    e.preventDefault();
    login();
  }

  // when submit button is clicked
  submitButton.onclick = function(e) {
    // stop default behaviour
    e.preventDefault();
    login();
  }

})();