如何在HTML中根据不同错误类型展示对应的错误提示信息

问题原因 #

你遇到两个错误提示同时显示的问题，主要是三点导致：

• 违反ID唯一规范：HTML要求页面ID全局唯一，你创建了两个id="signup-error-msg-holder"的容器，原CSS中该ID对应宽高100%的居中样式，重复ID会造成样式匹配异常、容器重叠
• 未重置错误状态：每次点击提交按钮时，没有先把所有错误提示的透明度重置为0，上一次触发显示的错误会一直留存，后续触发其他错误就会同时显示多个提示
• 逻辑覆盖不全：缺少用户名和密码都错误的场景处理，该场景下你当前的代码不会返回任何提示

解决方案 #

推荐优先用第一种优化方案，代码更简洁易维护，第二种是直接修复你现有双容器代码的方案。

方案1：优化版（单错误容器动态修改文本） #

无需新增多个错误容器，直接复用原有容器动态修改提示内容即可。

1. HTML保持原有结构即可，不需要新增错误容器：

<div id="signup-error-msg-holder">
    <p id="signup-error-msg"></p>
</div>

2. CSS无需修改，保持原有代码即可。

3. 替换原有JavaScript逻辑：

const signupForm = document.getElementById("signup-form");
const signupButton = document.getElementById("signup-form-submit");
const signupErrorMsg = document.getElementById("signup-error-msg");

signupButton.addEventListener("click", (e) => {
    e.preventDefault();
    // 每次提交先重置错误状态，隐藏提示
    signupErrorMsg.style.opacity = 0;
    const username = signupForm.username.value;
    const password = signupForm.password.value;
    let errorText = '';

    // 校验通过逻辑
    if (username === "admin" && password === "password") {
        alert("登录成功");
        location.reload();
        return;
    }
    // 分别校验字段，拼接错误提示
    if (username !== "admin") {
        errorText += "用户名无效";
    }
    if (password !== "password") {
        errorText += errorText ? "<br>" : "";
        errorText += "密码无效";
    }
    // 显示错误提示
    signupErrorMsg.innerHTML = errorText;
    signupErrorMsg.style.opacity = 1;
})

方案2：修复现有双容器代码 #

1. 修改HTML，把重复的ID改为类：

<div class="signup-error-msg-holder">
    <p id="signup-error-msg1">密码无效</p>
</div>
<div class="signup-error-msg-holder">
    <p id="signup-error-msg2">用户名无效</p>
</div>

2. 修改CSS，替换原#signup-error-msg-holder为类选择器，新增错误提示的统一样式：

/* 替换原#signup-error-msg-holder的样式 */
.signup-error-msg-holder {
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
/* 新增两个错误提示的统一样式，默认透明 */
#signup-error-msg1, #signup-error-msg2 {
    width: 23%;
    text-align: center;
    margin: 0;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #8a0000;
    border: 1px solid #8a0000;
    background-color: #e58f8f;
    opacity: 0;
}

3. 替换JavaScript逻辑，每次提交先重置所有错误提示状态：

const signupForm = document.getElementById("signup-form");
const signupButton = document.getElementById("signup-form-submit");
const signupErrorMsg1 = document.getElementById("signup-error-msg1");
const signupErrorMsg2 = document.getElementById("signup-error-msg2");

signupButton.addEventListener("click", (e) => {
    e.preventDefault();
    // 每次提交先隐藏所有错误提示
    signupErrorMsg1.style.opacity = 0;
    signupErrorMsg2.style.opacity = 0;
    
    const username = signupForm.username.value;
    const password = signupForm.password.value;

    if (username === "admin" && password === "password") {
        alert("登录成功");
        location.reload();
    } else if (username === "admin" && password !== "password") {
        signupErrorMsg1.style.opacity = 1;
    } else if (username !== "admin" && password === "password") {
        signupErrorMsg2.style.opacity = 1;
    } else {
        // 用户名密码都错误的场景，同时显示两个提示
        signupErrorMsg1.style.opacity = 1;
        signupErrorMsg2.style.opacity = 1;
    }
})

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