JavaScript实现文本框校验并添加错误图标

在前端开发中，表单验证是提升用户体验的重要环节。本文将详细介绍如何使用JavaScript实现文本框校验，并在错误信息前添加醒目的错误图标。

1. 准备工作

首先，我们需要准备一个基本的HTML表单和一个错误图标（可以使用Font Awesome或自定义图片）：

<form id="myForm">
  <div class="form-group">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <span class="error-message"></span>
  </div>
  <button type="submit">提交</button>
</form>

<!-- 使用Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

2. JavaScript校验实现

下面是实现文本框校验并添加错误图标的JavaScript代码：

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const usernameInput = document.getElementById('username');
  const errorSpan = usernameInput.nextElementSibling;
  
  // 清除之前的错误状态
  usernameInput.classList.remove('error');
  errorSpan.innerHTML = '';
  
  // 执行验证
  if(usernameInput.value.trim() === '') {
    // 添加错误图标和消息
    errorSpan.innerHTML = '<i class="fas fa-exclamation-circle"></i> 用户名不能为空';
    usernameInput.classList.add('error');
    usernameInput.focus();
    return false;
  }
  
  if(usernameInput.value.length < 6) {
    errorSpan.innerHTML = '<i class="fas fa-exclamation-circle"></i> 用户名至少6个字符';
    usernameInput.classList.add('error');
    usernameInput.focus();
    return false;
  }
  
  // 验证通过，提交表单
  this.submit();
});

3. 添加CSS样式

为了让错误提示更加美观，我们可以添加一些CSS样式：

.form-group {
  margin-bottom: 15px;
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-left: 5px;
}

.error-message i {
  margin-right: 5px;
}

input.error {
  border-color: #dc3545;
}

4. 使用自定义图片替代图标

如果你想使用自定义图片而不是Font Awesome图标，可以这样修改：

errorSpan.innerHTML = '<img src="error-icon.png" class="error-icon"> 用户名不能为空';

/* CSS */
.error-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
}

5. 实时校验实现

除了提交时校验，我们还可以添加实时校验功能：

document.getElementById('username').addEventListener('blur', function() {
  const errorSpan = this.nextElementSibling;
  
  if(this.value.trim() === '') {
    errorSpan.innerHTML = '<i class="fas fa-exclamation-circle"></i> 用户名不能为空';
    this.classList.add('error');
  } else {
    errorSpan.innerHTML = '';
    this.classList.remove('error');
  }
});

通过以上步骤，我们实现了一个完整的文本框校验功能，并在错误信息前添加了醒目的图标提示，大大提升了用户体验和表单的可用性。