基于数组的JavaScript/jQuery表单验证问题求助

嘿，我来帮你搞定这个登录验证的麻烦！你的代码核心问题出在账号密码的存储方式和匹配逻辑上，我一步步给你拆解并修复：

你的代码为什么会失效？ #

1. 错误的数组结构：你把用户名和密码存在了二维数组里（比如existingUserName里的每个元素都是["46179"]这种子数组），输入的是普通字符串，字符串和数组直接用==比较永远不会相等。
2. 逻辑错误的匹配方式：就算改成一维数组，直接拿输入值和整个数组existingUserName比较也是错的——你需要检查输入值是否存在于数组中，更重要的是，分开存两个数组很难保证用户名和密码的一一对应关系，万一顺序搞混就全乱了。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>Coding Project</title>
</head>
<body style="font-family:Helvetica">
<h1> Simple Login Form: </h1>
<form>
<input type="text" id="username" placeholder="Enter username" value="">
<br>
<br>
<input type="password" id="password" placeholder="Enter password" value="">
<br>
<br>
<button type="button" onClick="mySubmit()"> Submit </button>
</form>
<script type="text/javascript">
function mySubmit() {
  var userNameInput = document.getElementById("username").value.trim();
  var passWordInput = document.getElementById("password").value.trim();
  
  // 用对象数组存储合法账号，完美保证用户名和密码的对应关系
  var validAccounts = [
    {username: "46179", password: "helloworld123"},
    {username: "55678", password: "helloworld456"}
  ];

  // 优先检查空字段，避免后续无效逻辑
  if (!userNameInput || !passWordInput) {
    alert("Empty field, please enter Username and Password or Signup");
    return;
  }

  // 遍历账号数组，查找匹配的账号密码组合
  let matchedAccount = validAccounts.find(account => {
    return account.username === userNameInput && account.password === passWordInput;
  });

  if (matchedAccount) {
    alert("Login successful!");
  } else {
    alert("Incorrect Username or Password");
  }
}
</script>
</body>
</html>

关键修改点说明 #

• 账号存储优化：用validAccounts对象数组存储账号，每个元素包含username和password字段，既清晰又能保证账号密码的对应关系，以后新增账号只需要加一个对象就行。
• 空字段检查提前：先判断输入是否为空（用trim()去除首尾空格，防止用户输入空白字符导致误判），避免后续不必要的遍历逻辑。
• 正确的匹配逻辑：用Array.find()方法遍历账号数组，精准找到和输入完全匹配的账号对象。如果找到匹配项，就提示登录成功，否则提示错误。

额外小提醒 #

• 实际开发中绝对不要把明文密码写在前端代码里，这是严重的安全问题！这里只是为了演示验证逻辑，真实场景一定要通过后端接口做验证。
• 可以给输入框加一些交互提示，比如验证失败时边框变红，能提升用户体验。

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