将错误消息放入Bootstrap输入中

<div class="form-group">
  <label for="inputUsername">用户名</label>
  <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
  <div class="invalid-feedback" id="usernameError"></div>
</div>

document.getElementById('inputUsername').addEventListener('blur', function() {
  var username = this.value;
  var errorDiv = document.getElementById('usernameError');
  
  if (username.length < 6) {
    errorDiv.textContent = '用户名长度不能少于6个字符';
    this.classList.add('is-invalid');
  } else {
    errorDiv.textContent = '';
    this.classList.remove('is-invalid');
  }
});

.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + .75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23dc3545' d='M4 0a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 7.5A3.5 3.5 0 1 1 4 .5a3.5 3.5 0 0 1 0 7z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(.375em + .1875rem) center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}