检查输入用户名是否存在于数组的代码故障排查求助

需要实现功能：检查表单提交的username值是否存在于usernames数组中。若存在则显示提示信息；若不存在则将该值添加至数组并提交表单。但当前代码无法正常运行，替换includes()为indexOf()后仍无效。

相关代码 #

HTML #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Validating Form Data</title>
    <link rel="stylesheet" href="index.css" type="text/css">
  </head>
  <body>
      <h3>Register your account:</h3>
    <p id="errors"></p>
    <form id="registration-form" method="POST" action="https://formdump.codeinstitute.net/">
        <div class="username">
            <label for="username">Username:</label>
            <input id="username" name="username" type="text" required>
        </div>
        <div class="password">
            <label for="password">Password:</label>
            <input id="password" name="password" type="password" required>
        </div>
        <input type="submit">
        
    </form>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
  </body>
</html>

CSS #

label {
    display: block;
}
input {
    margin-bottom: 1rem;
}
p {
    color: red;
    font-weight: bold;
}

JS #

let usernames = ["Harry", "Daisy", "Michael", "Sarah", "Sally"];

// Write your code here
let form = document.getElementById("registration-form");
form.addEventListener("submit", handleSubmit);

let errorMsg = document.getElementById("errors");
let uName = form.elements["username"].value;

let abc = usernames.includes(uName);

function handleSubmit(event) {
    event.preventDefault();
    if (abc) {
        errorMsg.innerHTML = `<p>Sorry, the username ${uName} is already in use. Please choose another username.</p>
  `;
    } else {
        usernames.push(uName);
        form.submit();
        console.log(usernames);
    }
}

核心问题是变量初始化时机错误：

• uName和abc在页面加载完成后立即赋值，此时用户还未在输入框输入内容，uName为空字符串，abc的判断结果是“空字符串是否在数组中”（结果为false）。
• 用户提交表单时，代码仍使用页面加载时的旧值判断，完全没有获取当前输入的用户名，导致无论输入什么，都会执行“添加数组+提交表单”的逻辑，校验功能完全失效。

let usernames = ["Harry", "Daisy", "Michael", "Sarah", "Sally"];

let form = document.getElementById("registration-form");
form.addEventListener("submit", handleSubmit);

let errorMsg = document.getElementById("errors");

function handleSubmit(event) {
    event.preventDefault();
    // 每次提交时才获取当前输入的用户名，去除前后空格
    let uName = form.elements["username"].value.trim();
    // 实时判断当前用户名是否存在于数组中
    let isExists = usernames.includes(uName);
    
    if (isExists) {
        errorMsg.innerHTML = `<p>Sorry, the username ${uName} is already in use. Please choose another username.</p>`;
    } else {
        usernames.push(uName);
        form.submit();
        console.log(usernames);
    }
}

• 加入.trim()避免用户输入空白字符导致的无效注册。
• 若需要大小写不敏感校验，可将数组值和输入值统一转为小写后再判断（比如usernames.map(name => name.toLowerCase()).includes(uName.toLowerCase())）。

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