Mot de passe JavaScript mal saisi et ressaisi

JavaScript Mot de passe incorrect, ressaisissez

Avec le développement continu et la popularité d'Internet, de plus en plus de personnes commencent à utiliser diverses applications pour interagir en ligne, et ces applications nécessitent toutes un compte et un mot de passe pour l'authentification de connexion. Afin d'assurer la sécurité du compte, de nombreuses applications mettent en place un mécanisme selon lequel, lorsque le mot de passe est mal saisi, l'utilisateur doit attendre un certain temps avant de ressaisir le mot de passe. La mise en œuvre de ce mécanisme nécessite l'utilisation de JavaScript pour la programmation.

Dans cet article, nous utiliserons un exemple de programme pour expliquer en détail le processus d'écriture et les détails d'implémentation de JavaScript pour implémenter une nouvelle tentative de mot de passe.

Analyse des exigences de l'exemple de programme :

Les exigences de cet exemple de programme sont les suivantes :

1. Lorsque l'utilisateur ne parvient pas à connectez-vous, il doit attendre. Veuillez patienter 5 secondes avant de saisir à nouveau votre mot de passe.
2. Les utilisateurs ne peuvent pas saisir des mots de passe incorrects plus de 3 fois à la fois.
3. Lorsqu'un utilisateur saisit un mot de passe incorrect 3 fois de suite, il doit attendre 180 secondes avant de ressaisir le mot de passe.

Sur la base des exigences ci-dessus, nous pouvons écrire du code JavaScript comme suit :

// 定义密码输入错误次数的变量
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);
      }
   }
}

Analyse du code :

Dans le code ci-dessus , Nous avons d'abord défini trois variables count, wait et time, qui sont utilisées pour enregistrer le nombre de fois où l'utilisateur saisit le mauvais mot de passe, s'il doit attendre et le temps d'attente respectivement.

Ensuite, nous avons écouté l'événement click du bouton de connexion. Dans la fonction de gestionnaire de l'événement click, nous obtenons d'abord le nom d'utilisateur et le mot de passe saisis par l'utilisateur, puis déterminons si nous devons attendre. . Si vous devez attendre, invitez directement l'utilisateur à attendre, puis à revenir.

S'il n'est pas nécessaire d'attendre, nous déterminerons alors si le nom d'utilisateur et le mot de passe saisis sont corrects. S'il est correct, il passera à la page principale ; s'il est incorrect, il invitera l'utilisateur à ressaisir le mot de passe et augmentera le nombre d'entrées de mot de passe incorrectes de 1.

Lorsqu'un mauvais mot de passe est saisi plus de 3 fois, nous devons attendre 180 secondes avant de ressaisir le mot de passe. Pendant le processus d'attente, nous définissons l'attente sur true, le temps sur 180 et utilisons la minuterie setInterval pour diminuer le temps de 1 seconde toutes les 1 seconde jusqu'à ce que le temps d'attente soit de 0. Une fois que le temps d'attente atteint 0, nous pouvons définir l'attente sur false.

Si un mot de passe erroné n'est pas saisi plus de 3 fois, nous devons alors attendre 5 secondes avant de ressaisir le mot de passe et utiliser une méthode similaire pour mettre en œuvre les fonctions de synchronisation et de contrôle du temps d'attente.

Résumé :

Grâce à l'introduction du code ci-dessus, nous pouvons voir que la fonction de JavaScript consistant à réessayer un mot de passe incorrect n'est pas compliquée et ne nécessite qu'un jugement logique et un timing de base. Le contrôle de l'appareil peut être réalisé. Bien entendu, certains facteurs de sécurité d'entrée, de disposition de l'interface et d'autres facteurs doivent être pris en compte lors de la mise en œuvre. Ces facteurs doivent être spécifiquement ajustés et optimisés en fonction des besoins réels lors de l'écriture réelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!