JavaScript控制CSS display实现邮箱错误提示，else if语句失效问题

问题背景 #

需求：点击提交按钮时，若未输入邮箱、输入错误邮箱或格式无效，需在邮箱字段上方显示错误提示；输入有效邮箱则隐藏表单。目前if语句可正常执行，但else if语句无法触发。

用户提供的原始代码 #

HTML

<div id="newsletter"  class="newsletter_form_container ">
<form class="text-and-input__form">
        <p class="labelHolder"><label for="" class="text-and-input__label">Email address</label><small id="inputError" class="inputError">Valid email required</small></p>
        <input type="email" placeholder="email@company.com" class="text-and-input__inputfield" required>
   <button  id="submit" name="submit" class="text-and-input__btn">Subscribe to monthly newsletter</button>
    </form>
    </div>

CSS

.hide{
    display: none;
}
.inputError{
    margin-left: auto;
    display: none;
}
.labelHolder{
display: flex;
}
.show{
    display: show;
}

JavaScript

document.getElementById('submit').addEventListener('click', submitSuccess);
function submitSuccess(e) {
  const email = document.getElementsByClassName('text-and-input__inputfield');
    e.preventDefault();
    const emailInput = email[0].value;
    if( emailInput && emailInput.includes('@') && emailInput.includes('.com','.net','.edu','.biz','.xyz')){
    document.getElementById("newsletter").classList.add("hide");
    
    }
    else if( !emailInput && !emailInput.includes('@') && !emailInput.includes('.com','.net','.edu','.biz','.xyz')){
      document.getElementById("inputError").classList.add("show");
    }
    
  }

问题根源 #

• else if条件逻辑矛盾：!emailInput表示输入为空，此时调用!emailInput.includes('@')会直接报错（空字符串没有includes方法），且逻辑上空输入无需再判断@或后缀，多个&&叠加导致条件永远无法成立。
• includes方法使用错误：includes仅支持单个搜索参数，传入的多个后缀（.com、.net等）只会校验第一个，后续参数无效，无法匹配多种合法邮箱后缀。
• CSS的show类属性错误：display: show是无效的CSS属性值，浏览器无法识别，需替换为合法值。
• 缺少状态重置逻辑：用户修正输入后，错误提示不会自动隐藏，状态残留影响交互。

修复后的代码 #

HTML（无需修改） #

<div id="newsletter"  class="newsletter_form_container ">
<form class="text-and-input__form">
        <p class="labelHolder"><label for="" class="text-and-input__label">Email address</label><small id="inputError" class="inputError">Valid email required</small></p>
        <input type="email" placeholder="email@company.com" class="text-and-input__inputfield" required>
   <button  id="submit" name="submit" class="text-and-input__btn">Subscribe to monthly newsletter</button>
    </form>
    </div>

CSS（修正show类） #

.hide{
    display: none;
}
.inputError{
    margin-left: auto;
    display: none;
}
.labelHolder{
    display: flex;
}
.show{
    display: inline-block; /* 替换无效的show值 */
}

JavaScript（修正逻辑判断） #

document.getElementById('submit').addEventListener('click', submitSuccess);

function submitSuccess(e) {
    e.preventDefault();
    const emailInput = document.querySelector('.text-and-input__inputfield').value;
    const errorElement = document.getElementById('inputError');
    const newsletterContainer = document.getElementById('newsletter');

    // 每次提交前重置状态，避免残留
    errorElement.classList.remove('show');
    newsletterContainer.classList.remove('hide');

    // 定义合法邮箱后缀列表
    const validDomains = ['.com', '.net', '.edu', '.biz', '.xyz'];
    // 校验邮箱是否包含@，且后缀属于合法列表
    const isEmailValid = emailInput.includes('@') && validDomains.some(domain => emailInput.endsWith(domain));

    if (emailInput && isEmailValid) {
        // 邮箱有效，隐藏表单
        newsletterContainer.classList.add('hide');
    } else {
        // 未输入或邮箱无效，显示错误提示
        errorElement.classList.add('show');
    }
}

修复说明 #

• 简化逻辑：去掉矛盾的else if，用else覆盖所有无效场景（未输入或格式错误）
• 修正后缀校验：用some方法遍历合法后缀列表，判断邮箱是否以任意合法后缀结尾
• 修复CSS属性：将无效的display: show替换为inline-block，确保错误提示正常显示
• 增加状态重置：每次提交前重置错误提示和表单状态，避免残留问题
• 优化DOM获取：用querySelector替代getElementsByClassName，代码更简洁

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