求助：输入不满足要求时如何将文本框边框变红并显示错误提示

架构老林

2026-7-3

解决方案

首先修正你代码里的变量名不匹配问题：你定义了userEmail但用了emailInput，这会导致JS报错，先统一变量名。

接下来分三部分实现你要的功能：

1. 调整HTML结构

添加错误提示元素，放在输入框下方：

<form>
  <input name="email" type="email" class="user-email" placeholder="Enter your email">
  <span class="error-message"></span><br>
  <input type="submit" class="btn-next" disabled>
</form>

把input类型改成email更符合语义，也能让浏览器做基础校验

2. 添加CSS样式

定义错误状态的样式：

.user-email.error {
  border: 2px solid #dc3545;
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  display: block;
  margin-top: 0.25rem;
}

3. 完善JavaScript逻辑

用邮箱正则做更准确的校验，同时处理错误提示和按钮状态：

const userEmail = document.querySelector('.user-email');
const btnNext = document.querySelector('.btn-next');
const errorMsg = document.querySelector('.error-message');
// 基础邮箱正则表达式，可根据需求调整
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

userEmail.addEventListener("input", () => {
  const emailValue = userEmail.value.trim();
  const isValidEmail = emailRegex.test(emailValue);

  if (isValidEmail) {
    // 符合要求：移除错误样式、清空提示、启用按钮
    userEmail.classList.remove('error');
    errorMsg.textContent = '';
    btnNext.removeAttribute('disabled');
  } else {
    // 不符合要求：添加错误样式、显示提示、禁用按钮
    userEmail.classList.add('error');
    errorMsg.textContent = 'please enter a valid email';
    btnNext.disabled = true;
  }
});