JavaScript+HTML简易登录表单调试求助：验证逻辑不符合预期

你的代码核心问题在于循环校验的逻辑错误：每遍历到一个不匹配的凭据就立即弹出错误提示，而不是等所有凭据都检查完毕、确认无匹配项时才提示错误。

举个例子：当你输入user2/pass2时，循环会先检查第一个凭据user1/pass1，不匹配就直接弹出错误，之后才会匹配到第二个有效凭据并跳转，这就导致错误提示和跳转冲突的问题；如果输入无效凭据，循环会多次弹出错误提示（每个不匹配的凭据都会触发一次）。

修复方案 #

调整校验逻辑：先通过循环确认是否存在匹配的凭据，再统一处理结果，而不是在循环内直接执行提示或跳转：

<form id="login-form">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

<script>
  const form = document.getElementById('login-form');
  const username = document.getElementById('username');
  const password = document.getElementById('password');

  form.addEventListener('submit', function(event) {
    event.preventDefault();

    const validCredentials = [
      { username: 'user1', password: 'pass1' },
      { username: 'user2', password: 'pass2' }
    ];

    let isValid = false;
    // 遍历所有凭据，确认是否有匹配项
    for (const credential of validCredentials) {
      if (credential.username === username.value && credential.password === password.value) {
        isValid = true;
        break; // 找到匹配项后终止循环，无需继续遍历
      }
    }

    // 根据校验结果处理
    if (isValid) {
      window.location.href = '/home';
    } else {
      alert('Invalid username or password');
    }
  });
</script>

修改点说明 #

• 新增isValid标记变量，初始为false，用于记录是否找到有效凭据
• 循环内仅更新标记，不再直接执行跳转或提示
• 遍历结束后统一判断标记：有效则跳转，无效则弹出错误提示
• 找到匹配项后用break终止循环，提升性能

这样就能实现你预期的效果：输入有效凭据跳转首页，无效则仅弹出一次错误提示。

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