输入错误邮箱格式时，提示警告段落为何无法显示？

核心问题1：缺少错误提示的DOM元素 #

你的HTML结构里没有对应.error_text的警告信息段落，CSS样式定义了但没有实际元素，自然无法显示。

解决办法：在表单的输入框下方添加错误提示元素：

<form id="form" class="form">
  <input type="text" autocomplete="off" placeholder="Your Email Address" id="email" name="email" required/>
  <!-- 添加错误提示元素 -->
  <p class="error_text">请输入有效的邮箱地址</p>
  <button id="button" type="submit">Notify Me</button>
</form>

核心问题2：未绑定表单验证逻辑 #

你写了邮箱验证函数，但没有将其与表单提交事件关联，也没有处理错误提示的显示/隐藏逻辑。

解决办法：添加表单提交事件监听，调用验证函数并控制错误提示的显示：

const form = document.getElementById('form');
const emailInput = document.getElementById('email');
const errorText = document.querySelector('.error_text');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  const email = emailInput.value.trim();
  
  if (!validateEmail(email)) {
    emailInput.classList.add('error'); // 给输入框添加错误样式
    errorText.style.display = 'block'; // 显示错误提示
  } else {
    emailInput.classList.remove('error'); // 移除输入框错误样式
    errorText.style.display = 'none'; // 隐藏错误提示
    // 验证通过后可执行表单提交逻辑
    form.submit();
  }
});

function validateEmail(email) {
  const re = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  return re.test(String(email).toLowerCase());
}

额外优化：CSS定位问题 #

你的.error_text用了硬编码的top:73.5rem，在不同屏幕尺寸下容易错位，建议改成相对定位：

form {
  position: relative; /* 让子元素的绝对定位基于表单容器 */
}

form .error_text {
  position: absolute;
  top: calc(100% + 0.5rem); /* 相对于输入框底部偏移 */
  right: 0;
  font-size: .95rem;
  color: hsl(354, 100%, 66%);
  font-weight: 500;
  font-style: italic;
  display: none;
}

调整后，当用户输入无效邮箱并提交时，错误提示即可正常显示。

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