Bootstrap框架中is-invalid类的工作原理是什么？附Vue表单验证实例

你猜的完全正确！Bootstrap里的is-invalid类和invalid-feedback类是配合实现表单错误反馈的核心，下面我给你拆解具体的工作逻辑：

• 错误提示的显示触发逻辑
  Bootstrap默认会把invalid-feedback元素隐藏——它的默认CSS是display: none。当你给表单控件（比如你的<input>）加上is-invalid类时，Bootstrap的CSS会通过通用兄弟选择器，让紧跟在控件之后的invalid-feedback元素自动显示出来。对应的核心CSS规则大概是这样的：

  .is-invalid ~ .invalid-feedback {
    display: block;
  }
  

  这里的~选择器意味着，只要两个元素在同一个父容器下，且invalid-feedback在is-invalid控件的后面，就能触发显示效果，这也是为什么你的代码里把错误提示放在输入框后面是正确的做法。

• 表单控件的样式变化
  除了显示错误提示文本，is-invalid类还会给表单控件本身加上错误样式：比如红色的边框和阴影，让用户一眼就能看到哪个输入项有问题。对应的简化CSS是：

  .form-control.is-invalid {
    border-color: #dc3545; /* Bootstrap的危险色 */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
  }
  

• 和Vue动态绑定的配合
  你的代码里用:class="{' is-invalid': errors.foo}"来动态添加错误类，同时用v-if="errors.foo"控制提示元素的渲染。其实这里的v-if不是必须的——只要is-invalid存在，invalid-feedback就会显示，但用v-if可以在没有错误时把提示元素从DOM中移除，算是个小优化。

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