如何用CSS实现类似Gmail的输入标签邮箱验证功能？

嘿，我明白你想做的效果——用bootstrap-tagsinput实现像Gmail那样的标签式邮箱输入，输入有效邮箱时标签背景变绿，无效时变红。你原来的CSS没生效，核心问题是bootstrap-tagsinput生成的标签元素和输入框的状态没有直接的CSS关联：你写的样式是针对输入框本身的，但实际显示的标签是动态生成的<span class="tag">元素，不是那个输入框。

下面给你两种靠谱的实现方案，按需选择：

方案1：结合JavaScript（最可靠，支持持久化状态） #

因为标签是动态添加的，我们可以利用bootstrap-tagsinput的itemAdded事件，在每次添加标签时验证邮箱有效性，然后给标签加对应的样式类：

<!-- 你的原有HTML -->
<input class="form-control form-control-sm mailfield" type="email" data-role="tagsinput" data-class="label-info" placeholder="Sender Mail Id" autocomplete="on" autofocus="" required="">

<!-- 自定义样式 -->
<style>
/* 有效标签样式 */
.bootstrap-tagsinput .tag.valid {
  background-color: #28a745; /* 绿色，和Bootstrap的success色一致 */
}
/* 无效标签样式 */
.bootstrap-tagsinput .tag.invalid {
  background-color: #dc3545; /* 红色，和Bootstrap的danger色一致 */
}
/* 保留默认标签的基础样式 */
.bootstrap-tagsinput .tag {
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: 3px;
  color: #fff;
}
</style>

<!-- 处理验证的脚本 -->
<script>
// 监听标签添加事件
$('.mailfield').on('itemAdded', function(event) {
  const tag = $(event.item);
  const email = tag.text().trim();
  
  // 用两种方式验证都可以：原生HTML5验证 或 正则
  // 方式1：用输入框的原生验证
  // const isValid = $(this)[0].checkValidity();
  
  // 方式2：用邮箱正则（兼容性更好）
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const isValid = emailRegex.test(email);
  
  // 根据验证结果切换样式类
  if (isValid) {
    tag.addClass('valid').removeClass('invalid');
  } else {
    tag.addClass('invalid').removeClass('valid');
  }
});

// 可选：输入过程中实时反馈（比如输入到一半时提示）
$('.mailfield').on('input', function() {
  const inputVal = $(this).val();
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const lastTag = $(this).siblings('.bootstrap-tagsinput').find('.tag:last');
  
  if (inputVal && inputVal.includes('@')) {
    lastTag.toggleClass('valid', emailRegex.test(inputVal))
           .toggleClass('invalid', !emailRegex.test(inputVal));
  } else {
    lastTag.removeClass('valid invalid');
  }
});
</script>

方案2：纯CSS尝试（仅输入过程生效，局限性大） #

如果不想写JS，可以试试利用DOM结构的兄弟选择器，但这种方式只能在输入过程中生效，标签添加后不会保留状态：

/* 当输入框验证有效时，给相邻的最后一个标签加绿色背景 */
.bootstrap-tagsinput input:valid + .tag {
  background-color: #28a745;
}
/* 当输入框验证无效时，给相邻的最后一个标签加红色背景 */
.bootstrap-tagsinput input:invalid + .tag {
  background-color: #dc3545;
}
/* 重置默认标签背景色 */
.bootstrap-tagsinput .tag {
  background-color: #17a2b8; /* 默认的info蓝色 */
  color: #fff;
}

小提示： #

• 优先选方案1，因为它能确保每个添加后的标签都保持对应的状态，用户体验更好。
• 验证逻辑用checkValidity()更贴合HTML5的原生验证，用正则则可以自定义验证规则，按需选择。

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