具有有效反馈和无效反馈的引导程序验证

Question

可能是我的学习是错误的，但似乎无法在同一表单组或输入组中同时使用Bootstrap的valid-feedback和invalid-feedback验证器，如下所示：

<div class="input-group">
<input type="text" class="form-control" placeholder="1234567890" v-model="account" maxlength="10" minlength="10" id="nuban">
<div class="valid-feedback">Great job, your number checks out.</div>
<div class="invalid-feedback">That's not a valid NUBAN.</div>
</div>

我的目标是在用户正确使用和错误使用时分别显示消息。

在有效输入上，我得到以下行为，绿色边框并检查是唯一成功的指示： img showing valid input

如果输入不正确，情况似乎还不错： img showing invalid input

以下是显示验证javascript代码的代码段：

(function () {
    'use strict';
    window.addEventListener('load', function () {
      var form = document.getElementsByClassName('kt-form')[0];
      var txt = document.getElementById('nuban');
      txt.addEventListener('blur', function (event) {
        let val = event.target.value
        if (val === 'Some') {
          txt.classList.add('is-valid');
        } else {
          txt.classList.add('is-invalid');
        }
      }, false);
    }, false);
  })();