纯JavaScript实现JSON存储的用户名与对应索引密码匹配校验问题

云上老周

2026-9-24

实现方案

你要的索引匹配校验不需要用递归，直接通过indexOf获取用户名对应索引即可，indexOf方法会自动遍历整个数组，返回第一个匹配元素的索引，不需要你手动写自增逻辑，实现步骤如下：

首先解析完整的JSON配置对象，不要单独解析usernames/passwords字符串
调用usernames.indexOf(输入用户名)获取匹配的索引值，如果返回-1说明用户名不存在
若索引有效，直接用该索引读取passwords数组的对应值，和输入的密码比对即可完成校验

修正后的完整代码

首先修正你原来的JSON语法错误（缺少逗号、多余尾部逗号）：

{
  "usernames": [
    "Supa", "Marwan", "Jason", "Jacob"
  ],
  "passwords": [
    "placeholder", "placeholder1", "placeholder2", "placeholder3"
  ]
}

修正后的JS逻辑：

// 先把完整的JSON字符串解析为JS对象
const userData = JSON.parse('填写你的完整JSON字符串');
const usernames = userData.usernames;
const passwords = userData.passwords;

function checkDetails() {
  const messageDom = document.getElementById("placeholder");
  // 读取输入框的实际输入内容
  const inputPassword = document.getElementById("placeholder1").value;
  const inputUsername = document.getElementById("placeholder2").value;

  // 自动获取匹配用户名的索引
  const matchIndex = usernames.indexOf(inputUsername);
  // 先校验用户名是否存在，再校验对应索引的密码是否匹配
  if (matchIndex !== -1 && passwords[matchIndex] === inputPassword) {
    messageDom.innerHTML = "登录成功";
  } else {
    messageDom.innerHTML = "用户名或密码无效";
  }
}