如何用JavaScript检测输入的username是否已存在于Select标签中？

原代码存在的问题 #

• HTML中多个<option>使用了重复的id="list"，违反HTML id唯一性规范，导致无法正确选择元素
• JavaScript选择器错误：document.querySelectorAll("list")是无效语法，未通过正确方式获取select下的选项
• 变量引用错误：定义了username变量，却使用user.value获取输入值
• 循环逻辑缺陷：每次循环都会覆盖提示文本颜色，即便找到重复项，后续不匹配的选项会把颜色改回绿色，无法正确提示重复状态

修正后的代码 #

关键HTML改动（仅修改select及option部分）

<select name="select" class="form-control" hidden required id="existing-users">
    <%
    for (int j = 0; j < utenti.size(); j++) {
    %>
    <option value="<%=utenti.elementAt(j).getUsername().toString()%>">
        <%=utenti.elementAt(j).getUsername().toString()%>
    </option>
    <%
    }
    %>
</select>

表单其余部分保持不变

修正后的JavaScript函数

function Control() {
    // 获取输入的用户名并去除首尾空格
    const inputUsername = document.getElementById("user").value.trim();
    // 获取隐藏select下的所有已有用户名选项
    const existingOptions = document.querySelectorAll("#existing-users option");
    const alertElement = document.getElementById("alert");
    
    // 默认设置为可用状态
    alertElement.style.color = "green";
    alertElement.textContent = "用户名可用";
    
    // 遍历校验重复
    for (let i = 0; i < existingOptions.length; i++) {
        if (existingOptions[i].value === inputUsername) {
            alertElement.style.color = "red";
            alertElement.textContent = "该用户名已存在";
            // 找到重复项后直接跳出循环，无需继续遍历
            break;
        }
    }
}

核心改动说明 #

1. HTML规范修正：

   • 给隐藏select添加唯一idexisting-users，方便JS精准定位
   • 给每个option显式设置value属性，确保用户名匹配的准确性（避免文本空格等干扰）
   • 移除重复的id="list"，符合HTML语法要求

2. JavaScript逻辑优化：

   • 统一变量命名，添加trim()处理输入值，避免空格导致的误判
   • 通过#existing-users option选择器准确获取所有已有用户名选项
   • 调整逻辑顺序：先默认设置为可用状态，找到重复项时再修改提示状态并跳出循环，避免结果被后续循环覆盖
   • 更新提示文本内容，让用户清晰了解当前校验状态

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