基于Materialize CSS实现输入框无效时添加警示图标

嘿，这个需求其实可以结合Materialize原生的校验机制轻松实现，不用复杂的额外逻辑，我给你拆解一下具体步骤：

1. 搭建带双后缀图标的HTML结构 #

首先在输入字段容器里，同时放置正常状态图标和错误警示图标，都加上Materialize的suffix类来定位：

<div class="input-field">
  <input id="user-email" type="email" class="validate">
  <label for="user-email">你的邮箱</label>
  <!-- 正常状态下显示的图标 -->
  <i class="material-icons suffix">email</i>
  <!-- 错误状态图标，默认隐藏 -->
  <i class="material-icons suffix red-text error-icon">error_outline</i>
</div>

2. 用CSS控制图标显隐 #

利用Materialize自动给无效字段添加的invalid类，通过CSS兄弟选择器就能精准切换两个图标的显示状态：

/* 默认隐藏错误图标 */
.error-icon {
  display: none;
}

/* 当输入框被标记为invalid时，显示错误图标、隐藏正常图标 */
.input-field input.invalid ~ .error-icon {
  display: inline-block;
}
.input-field input.invalid ~ .material-icons:not(.error-icon) {
  display: none;
}

3. 通用化适配所有表单字段 #

如果你的表单有多个需要校验的字段，把样式改成通用选择器，就能让所有带validate类的输入框自动生效：

.error-icon {
  display: none;
}

.input-field input.validate.invalid ~ .error-icon {
  display: inline-block;
}
.input-field input.validate.invalid ~ .material-icons:not(.error-icon) {
  display: none;
}

可选：JS监听校验事件（灵活场景） #

如果需要在输入实时校验、动态表单等场景下更精细地控制，可以监听校验相关事件：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带校验类的输入框
  const validateInputs = document.querySelectorAll('input.validate');
  
  validateInputs.forEach(input => {
    // 字段变为无效时触发
    input.addEventListener('invalid', () => toggleIcons(input, false));
    // 输入时检查有效性，恢复正常时切换图标
    input.addEventListener('input', () => {
      if (input.validity.valid) {
        toggleIcons(input, true);
      }
    });
  });
  
  // 封装图标切换逻辑
  function toggleIcons(input, isValid) {
    const icons = input.parentElement.querySelectorAll('.material-icons.suffix');
    icons[0].style.display = isValid ? 'inline-block' : 'none'; // 正常图标
    icons[1].style.display = isValid ? 'none' : 'inline-block'; // 错误图标
  }
});

这个方案完全贴合Materialize的原生校验逻辑，既保留了框架自带的红色下划线提示，又额外添加了更直观的警示图标，视觉反馈更清晰。

内容的提问来源于stack exchange，提问作者RPM