JavaScript文本框校验：优雅的错误信息展示方案

在前端开发中，表单验证是提升用户体验的关键环节。本文将介绍5种专业级的错误信息展示方案，帮助开发者实现既美观又实用的校验效果。

一、基础错误提示实现

// 基础DOM操作示例
function validateInput(inputElement) {
  const errorElement = document.createElement('div');
  errorElement.className = 'error-message';
  errorElement.textContent = '请输入有效内容';
  inputElement.parentNode.appendChild(errorElement);
}

二、图标+文字的复合提示

使用Font Awesome图标库增强视觉效果：

.error-wrapper {
  position: relative;
}
.error-icon {
  color: #ff4444;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

三、动态渐显效果

通过CSS过渡实现平滑显示：

.error-message {
  opacity: 0;
  max-height: 0;
  transition: all 0.3s ease;
}
.error-message.show {
  opacity: 1;
  max-height: 50px;
}

四、即时校验与延迟校验

根据场景选择合适的校验时机：

// 即时校验
input.addEventListener('input', validate);

// 延迟校验（防抖处理）
input.addEventListener('input', debounce(validate, 500));

五、无障碍访问优化

确保屏幕阅读器能正确识别错误信息：

<div 
  role="alert" 
  aria-live="assertive"
  class="error-message"
>
  密码必须包含大写字母
</div>

最佳实践总结

• 错误信息应当清晰具体，避免笼统提示
• 视觉反馈应当明显但不突兀
• 移动端需考虑触摸操作的便利性
• 错误状态应当通过ARIA属性正确标记
• 考虑色盲用户的视觉识别需求