Twitter bootstrap 具有有效反馈和无效反馈的引导验证

可能是我的学习有误，但似乎不可能在同一表单组或输入组中同时使用Bootstrap的

有效反馈

和

无效反馈

验证器，如下所示：

<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>

(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);
  })();