JavaScript password entered incorrectly and re-entered

JavaScript Incorrect password re-enter

With the continuous development and popularization of the Internet, more and more people are beginning to use various applications for online interaction, and these applications require accounts and passwords. Login authentication. In order to ensure the security of the account, many applications will set up a mechanism that when the password is entered incorrectly, the user must wait for a period of time before re-entering the password. The implementation of this mechanism requires the use of JavaScript for programming.

In this article, we will use a sample program to explain in detail the writing process and implementation details of JavaScript to implement password retry.

Requirements analysis of the sample program:

The requirements of this sample program are as follows:

1. When the user fails to log in, he must wait 5 seconds before re-entering the password. .
2. Users cannot enter incorrect passwords more than 3 times each time.
3. When a user enters an incorrect password three times in a row, they must wait 180 seconds before re-entering the password.

Based on the above requirements, we can write JavaScript code as follows:

// 定义密码输入错误次数的变量
var count = 0;

// 定义是否需要等待的布尔变量
var wait = false;

// 定义等待时间的变量
var time = 0;

// 监听登录按钮的点击事件
document.getElementById("login").onclick = function() {
   // 获取用户输入的密码和用户名
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
  
   // 判断是否需要等待
   if (wait) {
      // 提示用户需要等待
      alert("请" + time + "秒后重试！");
      return;
   }
  
   // 判断用户名和密码是否正确
   if (username === "admin" && password === "123456") {
      // 登录成功，跳转到主页面
      location.href = "main.html";
   } else {
      // 登录失败，提示用户重新输入密码
      alert("用户名或密码错误！");
      count++;

      // 判断是否需要等待
      if (count >= 3) {
         // 需要等待 180 秒
         count = 0;
         wait = true;
         time = 180;
         setInterval(function() {
            time--;
            if (time == 0) {
               wait = false;
            }
         }, 1000);
      } else {
         // 需要等待 5 秒
         wait = true;
         time = 5;
         setInterval(function() {
            time--;
            if (time == 0) {
               wait = false;
            }
         }, 1000);
      }
   }
}

Code analysis:

In the above code, we first define three variables count, wait and time are used to record the number of times the user has entered the wrong password, whether they need to wait and the waiting time respectively.

Then we listened to the click event of the login button. In the handler function of the click event, we first obtain the user name and password entered by the user, and then determine whether we need to wait. If you need to wait, then directly prompt the user to wait and then return.

If there is no need to wait, then we will determine whether the entered user name and password are correct. If it is correct, it will jump to the main page; if it is incorrect, it will prompt the user to re-enter the password, and increase the number of incorrect password entries by 1.

When the wrong password is entered more than 3 times, we need to wait 180 seconds before re-entering the password. During the waiting process, we set wait to true, time to 180, and use the setInterval timer to decrease the time by 1 second every 1 second until the waiting time is 0. After the wait time reaches 0, we can set wait to false.

If the wrong password is entered no more than 3 times, then we need to wait 5 seconds before re-entering the password, and use a similar method to implement the waiting time timing and control functions.

Summary:

Through the introduction of the above code, we can see that JavaScript’s function of retrying an incorrect password is not complicated. It only requires some basic logical judgment and timer control. can be realised. Of course, some input security, interface layout and other factors need to be taken into consideration during implementation. These factors need to be specifically adjusted and optimized according to actual needs during actual writing.

The above is the detailed content of JavaScript password entered incorrectly and re-entered. For more information, please follow other related articles on the PHP Chinese website!