实现表单输入框内根据验证结果动态显示勾选/错误图标

1. 调整HTML结构 #

把输入框和验证图标放在同一容器内，为定位提供基础：

<div class="input-group">
  <input type="email" id="email" placeholder="邮箱">
  <i class="fa fa-check validation-icon"></i>
  <i class="fa fa-exclamation validation-icon"></i>
</div>
<div class="input-group">
  <input type="password" id="password" placeholder="密码">
  <i class="fa fa-check validation-icon"></i>
  <i class="fa fa-exclamation validation-icon"></i>
</div>

2. CSS定位实现 #

通过相对+绝对定位让图标嵌入输入框右侧，默认隐藏：

.input-group {
  position: relative;
  margin-bottom: 1rem;
}

.input-group input {
  padding-right: 2.5rem; /* 给图标预留空间，避免内容被遮挡 */
  width: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
}

.validation-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  display: none; /* 默认隐藏图标 */
  font-size: 1rem;
}

/* 验证成功时显示勾选图标 */
.input-group.valid .fa-check {
  display: block;
  color: #2ecc71;
}

/* 验证失败时显示错误图标 */
.input-group.invalid .fa-exclamation {
  display: block;
  color: #e74c3c;
}

3. JS验证逻辑 #

监听输入事件，根据验证结果切换容器状态类，控制图标显示：

const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const emailGroup = emailInput.parentElement;
const passwordGroup = passwordInput.parentElement;

// 邮箱验证规则
function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

// 密码验证规则（示例：至少6位）
function validatePassword(password) {
  return password.length >= 6;
}

// 通用输入处理函数
function handleInput(input, group, validator) {
  const value = input.value.trim();
  if (!value) {
    // 输入为空时移除状态类，隐藏图标
    group.classList.remove('valid', 'invalid');
    return;
  }
  const isValid = validator(value);
  if (isValid) {
    group.classList.add('valid');
    group.classList.remove('invalid');
  } else {
    group.classList.add('invalid');
    group.classList.remove('valid');
  }
}

emailInput.addEventListener('input', () => handleInput(emailInput, emailGroup, validateEmail));
passwordInput.addEventListener('input', () => handleInput(passwordInput, passwordGroup, validatePassword));

关键说明 #

• 输入框的padding-right必须足够容纳图标，避免输入内容被遮挡
• 用transform: translateY(-50%)确保图标在输入框内垂直居中，适配不同高度的输入框
• 空值时主动移除状态类，保证图标完全隐藏
• 验证规则可根据实际需求修改，比如密码复杂度、手机号格式等

内容的提问来源于stack exchange，提问作者Central-Attack