如何使用JavaScript实现最多支持3次试错的简单登录页面功能

现有代码问题 #

• 循环范围错误：你定义的UserInfo数组包含5个用户，循环条件i<4只会遍历前4个，最后一个用户austin永远无法匹配
• 弹窗逻辑错误：每轮循环都会触发alert，就算输入正确账号，第一次匹配成功弹窗后，后续3次循环还会连续弹出错误提示
• 缺少错误计数逻辑：没有变量记录连续输错的次数，也没有达到3次后禁止输入的相关逻辑
• 匹配成功后无终止逻辑：账号密码校验通过后没有跳出循环或终止函数，会继续执行无用的遍历代码

修正后完整代码 #

// 预置用户信息
var UserInfo = [
  {
    username: "elliot",
    password: "123"
  },
  {
    username: "nicholas",
    password: "456"
  },
  {
    username: "rose",
    password: "789"
  },
  {
    username: "samantha",
    password: "987"
  },
  {
    username: "austin",
    password: "654"
  }
]
// 全局记录连续输错次数
var wrongCount = 0
// 登录按钮点击事件
document.getElementById("btn").onclick = function() {
  // 已经输错3次直接拦截操作
  if (wrongCount >= 3) {
    alert("已连续输错3次，暂时无法登录")
    return
  }
  var username = document.getElementById("un").value.trim()
  var password = document.getElementById("pw").value.trim()
  // 校验是否匹配成功
  var isLoginSuccess = UserInfo.some(function(user) {
    return user.username === username && user.password === password
  })
  if (isLoginSuccess) {
    alert("登录成功")
    // 登录成功重置错误次数
    wrongCount = 0
  } else {
    wrongCount++
    if (wrongCount >= 3) {
      // 输错3次禁用输入框和按钮
      document.getElementById("un").disabled = true
      document.getElementById("pw").disabled = true
      document.getElementById("btn").disabled = true
      alert("已连续输错3次，登录功能已锁定")
    } else {
      alert(`登录失败，请重试。剩余尝试次数：${3 - wrongCount}`)
    }
  }
}

逻辑说明 #

• 全局声明wrongCount变量记录连续输错次数，登录成功会自动重置该数值
• 每次点击登录先判断是否已经达到3次输错，达到则直接拦截校验逻辑
• 使用数组some方法匹配用户，匹配到符合条件的项就会终止遍历，不会出现多次弹窗的问题
• 连续输错3次后自动禁用用户名、密码输入框和登录按钮，实现禁止输入的需求

内容的提问来源于stack exchange，提问作者Jamie