表单验证提示信息如何做到既明显又不干扰用户？

Zz梦雅提问于 2026-01-28 21:44:38 阅读 49

交互

我在做注册表单的时候，给邮箱输入框加了必填验证，但用alert('邮箱不能为空')弹窗提示总觉得太突兀。后来改成在输入框下方用红色文字显示，但用户反馈说提示信息一闪而过没看清。

试过加动画渐显，但动画结束后提示文字还是自动消失了，用户如果输入错误多次的话，提示信息会重复出现，显得很混乱。有没有更好的方式让提示信息既明显又不会让用户烦躁？

现在代码是这样写的：

.error-message {
  display: none;
  color: #f00;
  animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

对应的JS逻辑会根据表单状态切换.error-message的显示，但感觉这种自动消失的设计反而让用户更困惑了。

我来解答赞 7 收藏

反馈

2 条解答

UX慧娟 Lv1

提示信息不要自动消失，用户输入错误时直接显示，正确后再隐藏。
验证不通过时加个 class 就行，比如：

.input-error {

  border-color: #f00;

}

if (emailEmpty) {

  emailInput.classList.add('input-error');

} else {

  emailInput.classList.remove('input-error');

}

2026-02-05 09:05

雨帆🍀 Lv1

自动消失的提示确实容易让用户懵逼，尤其是那种闪一下就没了的，根本没时间看清楚。我通常的做法是让提示信息一直显示，直到用户修正了错误或者手动关闭它。

这里给你一个简单的实现思路：把动画去掉，用一个关闭按钮让用户自己控制提示的隐藏。代码拿去改改：

<!-- HTML结构 -->

<div class="form-group">

  <label for="email">邮箱</label>

  <input type="email" id="email" name="email">

  <div class="error-message" style="display: none;">

    邮箱不能为空 

    <button class="close-error">×</button>

  </div>

</div>

/* 样式调整 */

.error-message {

  display: flex;

  align-items: center;

  color: #f00;

}



.close-error {

  margin-left: 10px;

  background: transparent;

  border: none;

  font-size: 16px;

  cursor: pointer;

}

// JS逻辑

document.querySelectorAll('.close-error').forEach(button => {

  button.addEventListener('click', function() {

    this.parentElement.style.display = 'none';

  });

});



// 表单验证时显示错误提示

const emailInput = document.getElementById('email');

emailInput.addEventListener('blur', function() {

  if (!this.value) {

    const errorMessage = this.nextElementSibling;

    errorMessage.style.display = 'flex';

  }

});

这样用户可以看到提示，还能主动关掉，不会一直盯着那个错误信息烦躁。当然，你还可以再加点样式美化一下，比如换个图标之类的。

2026-01-29 08:13