如何使用JavaScript实现登录验证成功后跳转打开main.html页面

适配现有项目的改造思路 #

你当前已经完成了表单结构搭建、账号集合配置、输入值获取、遍历校验、控制台日志输出的全流程，仅需要在账号匹配成功的代码分支追加跳转逻辑即可，不需要改动已有的业务代码。

具体可直接复用的跳转实现 #

在index.js的LogIn()函数内，找到登录成功的判断分支（即当前输出登录成功控制台日志的位置），按需选择以下两种跳转方式：

• 常规跳转：使用window.location.href = './main.html'，和你项目里引入style.css、index.js的相对路径逻辑完全一致，两个同目录下的独立页面可以直接匹配，不会出现路径错误
• 优化交互的跳转：如果不希望用户跳转main.html后，通过浏览器返回键退回到登录页（符合登录场景的常规交互逻辑），可以使用window.location.replace('./main.html')，该方法会替换当前浏览器历史栈中的登录页记录，跳转后无法通过返回键回到login页面

改造后适配你项目结构的完整代码参考 #

以下代码保留你已实现的全部逻辑，仅在成功分支追加跳转能力

// 你已预置的合法登录账号集合
const validAccountList = [
  { username: 'test', password: '123456' },
  { username: 'admin', password: 'admin888' }
]

function LogIn() {
  // 你已实现的输入值获取逻辑
  const usernameInput = document.querySelector('#username').value.trim()
  const passwordInput = document.querySelector('#password').value.trim()
  // 你已实现的控制台打印输入信息逻辑
  console.log('用户输入的账号信息：', usernameInput, passwordInput)

  // 你已实现的遍历校验逻辑
  const loginSuccess = validAccountList.some(item => {
    return item.username === usernameInput && item.password === passwordInput
  })

  if (loginSuccess) {
    // 你已实现的登录成功日志
    console.log('账号校验通过')
    // 新增的跳转逻辑，二选一即可
    window.location.replace('./main.html')
  } else {
    console.log('账号或密码不匹配')
  }
}

常见踩坑提示 #

• 不要把跳转逻辑写在账号校验的判断分支外部，否则会出现无论账号密码对错都强制跳转的问题
• 路径写法保持和项目现有资源引用规则一致即可：如果main.html和login.html同目录，直接写./main.html；如果main.html存放在子目录下，对应调整路径层级，避免出现404
• 如果登录按钮是绑定在form表单内的button元素，记得给按钮设置type="button"属性，否则会触发表单默认提交行为，打断JS的跳转流程，出现页面闪退后回到登录页的问题

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