Bootstrap 5 中 input 标签的 maxlength 和 minlength 属性不生效如何解决

1 明确原生属性的默认行为 #

• maxlength 是原生HTML属性，默认会实时阻止用户输入超过设定长度的字符
• minlength 原生不会实时拦截输入，仅会在表单提交时触发校验，提示用户输入长度不满足要求
  如果你观察到的是minlength没生效，首先确认是否是提交表单时才会触发的校验逻辑没有正常运行。如果是maxlength完全不生效，参考下方排查项。

2 检查代码拼写与冲突项 #

• 你提供的代码中label标签的类名拼写错误，正确应为form-label而非form-lable，虽然该错误不影响输入框属性生效，但建议修正避免其他样式问题。
• 排查是否存在自定义JS逻辑干扰：如果项目中有全局的input输入事件监听、字符过滤、自定义校验脚本，可能会覆盖原生属性的默认行为，可先注释所有自定义JS测试属性是否正常生效。
• 补充注意：如果输入框类型为number，minlength/maxlength属性本身不生效，需要改用min/max属性限制数值范围，或者改用type="text"搭配正则限制数字输入。

3 结合Bootstrap 5 表单校验的适配方案 #

如果你需要使用Bootstrap自定义校验样式，需要对表单做如下配置：
给<form>标签添加novalidate属性关闭原生默认校验提示，同时监听表单提交事件手动触发Bootstrap校验，示例代码如下：

<form novalidate class="needs-validation">
  <div class="mb-3">
    <label for="phone-number" class="form-label" style="font-family: 'yekan';"> f_name : </label>
    <input type="text" class="form-control mt-1" name="f_name" id="phone-number" required minlength="5" maxlength="40">
    <div class="invalid-feedback">请输入5-40个字符</div>
    <div class="form-text">some text</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
// Bootstrap 自定义校验初始化代码
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(form => {
  form.addEventListener('submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }
    form.classList.add('was-validated')
  }, false)
})
</script>

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