Bootstrap输入长度校验切换样式及反馈提示功能失效如何解决

现存问题列表 #

• HTML中重复使用id="name"，id属性必须全局唯一，document.getElementById()只能匹配到第一个符合的元素，第二个姓氏输入框无法绑定事件
• JS存在多处拼写错误：getELementById中字母L误大写，正确写法是getElementById；获取错误提示的invalid-feeback拼写错误，正确应为invalid-feedback
• 输入长度判断逻辑错误：name是DOM元素对象，直接取name.length无法获取输入内容长度，需要改为name.value.length
• 样式类操作逻辑错误：不需要移除form-control类，直接追加状态类即可，且切换状态前需要先移除对立的状态类，避免两个状态同时生效
• 反馈提示未做互隐处理：切换状态时需要隐藏另一个状态的提示，避免两个提示同时展示
• 校验规则边界错误：要求长度介于1到20之间，原判断逻辑>1 && <20会排除长度为1和20的情况，需要改为>=1 && <=20

修正后代码 #

HTML部分 #

<div class="col-md-4">
  <label for="first-name" class="form-label">First name</label>
  <input type="text" class="form-control validate-input" id="first-name" required>
  <div class="valid-feedback" style="display:none;">
    Looks good!
  </div>
  <div class="invalid-feedback" style="display:none;">
    长度需介于1到20个字符之间
  </div>
</div>
<div class="col-md-4">
  <label for="last-name" class="form-label">Last name</label>
  <input type="text" class="form-control validate-input" id="last-name" required>
  <div class="valid-feedback" style="display:none;">
    Looks good!
  </div>
  <div class="invalid-feedback" style="display:none;">
    长度需介于1到20个字符之间
  </div>
</div>

JS部分 #

// 批量给所有需要校验的输入框绑定失焦校验事件
const validateInputs = document.querySelectorAll(".validate-input");
validateInputs.forEach(input => {
  input.onblur = function() {
    // 获取当前输入框对应的提示元素
    const validFB = input.nextElementSibling;
    const invalidFB = validFB.nextElementSibling;
    const inputLength = this.value.trim().length;

    if (inputLength >= 1 && inputLength <= 20) {
      this.classList.remove("is-invalid");
      this.classList.add("is-valid");
      validFB.style.display = "block";
      invalidFB.style.display = "none";
    } else {
      this.classList.remove("is-valid");
      this.classList.add("is-invalid");
      invalidFB.style.display = "block";
      validFB.style.display = "none";
    }
  }
})

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