JavaScript表单验证问题：用户名/密码验证失效，表单直接提交

核心问题点 #

• for-in循环用法完全错误：你用for (usernameInput in users)时，usernameInput会被赋值为数组的索引（0、1、2、3），直接覆盖了之前获取的用户输入值，导致后续users.includes(usernameInput)检查的是索引是否在用户数组里，而非输入的用户名，完全偏离验证逻辑。
• 验证逻辑混乱：原代码的双层循环没有实现“用户名对应密码”的匹配逻辑，反而在做毫无意义的索引存在性检查，自然无法拦截错误请求。
• 事件处理不标准：依赖window.event阻止默认行为不是跨浏览器的标准写法，存在兼容性问题。

修复后的代码 #

JavaScript部分 #

"use strict";

let loginform = document.forms.login;
loginform.addEventListener("submit", checkLogin);
// 用对象数组存储用户名和对应密码，避免索引错位问题
const userCredentials = [
  { username: "Administrator", password: "Password01" },
  { username: "Manager", password: "Password" },
  { username: "Cleric", password: "Admin" },
  { username: "Scribe", password: "P@ssword" }
];

function checkLogin(e) {
  // 先阻止表单默认提交，验证通过后再放行
  e.preventDefault();
  
  const usernameInput = loginform.user.value; // 利用表单name属性直接获取元素，更简洁
  const pwInput = loginform.pword.value;

  // 查找匹配的用户名和密码
  const matchedUser = userCredentials.find(user => 
    user.username === usernameInput && user.password === pwInput
  );

  if (!matchedUser) {
    // 区分用户名错误和密码错误
    const userExists = userCredentials.some(user => user.username === usernameInput);
    if (!userExists) {
      alert("用户名错误，请重试。");
      loginform.user.focus();
    } else {
      alert("密码错误，请重试。");
      loginform.pword.focus();
    }
    return;
  }

  // 验证通过，提交表单
  loginform.submit();
}

HTML部分（保持原结构即可） #

<h1 id="main">Login to Umbrella Corporation</h1>
<div id="container">
  <form name="login" action="success.html" method="POST">
    <input type="text" name="user" id="Username">
    <br>
    <br>
    <input type="password" name="pword" id="Password">
    <br>
    <br>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </form>
</div>

优化说明 #

• 凭证存储更合理：用对象数组绑定用户名和密码，避免独立数组可能出现的索引错位问题。
• 验证逻辑清晰：通过find方法直接查找匹配的凭证，逻辑简洁易懂。
• 标准事件处理：使用回调参数e调用preventDefault()，保证跨浏览器兼容性。
• 错误提示精准：区分用户名和密码错误场景，提升用户体验。

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