如何使用Bootstrap 4.6实现输入框字符长度校验功能

实现方案 #

你可以直接用HTML5约束验证API配合Bootstrap 4.6原生的校验规则实现，不需要手动修改输入框的样式类，was-validated 会自动根据输入框的校验状态触发对应样式。

补充后的checkInput函数逻辑

function checkInput() {
  // 先获取输入框DOM元素，而非仅取值
  const inputEl = document.getElementById("validationTextarea");
  const inputValue = inputEl.value;

  if(inputValue.length < 5) {
    // 设置自定义校验不通过，参数为自定义的错误提示文本
    inputEl.setCustomValidity("输入内容长度不能小于5位");
  } else {
    // 清空自定义校验信息，代表校验通过
    inputEl.setCustomValidity("");
  }
  // 立即更新校验状态，触发Bootstrap样式渲染
  inputEl.reportValidity();
}

可选优化（显示错误提示）

如果需要展示具体的错误文本，可在input标签后追加invalid-feedback容器，错误内容会自动在校验不通过时显示：

<input class="form-control" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required>
<div class="invalid-feedback">
  输入内容长度不能小于5位
</div>

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