如何为Bootstrap 5表单添加字符长度校验规则

第一步：修改HTML，添加最小长度属性 #

给需要限制最小字符数的输入框加上minlength属性，让HTML5原生校验识别长度要求，Bootstrap会自动关联这个校验状态：

修改后的关键input代码示例：

<!-- 姓名输入框（最小2字符） -->
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" required minlength="2">
<input type="text" class="form-control" id="lastname" placeholder="Last Name" required minlength="2">

<!-- 用户名（最小5字符） -->
<input type="text" class="form-control" id="username" placeholder="User Name" required minlength="5">

<!-- 密码（最小7字符） -->
<input type="password" class="form-control" id="password" placeholder="Password" required minlength="7">

第二步：扩展JS代码，实现实时校验 #

原来的JS仅在表单提交时触发校验，现在添加实时监听逻辑，在用户输入或失去焦点时立即校验字段，更新Bootstrap的校验样式：

修改后的完整JS代码：

(function () {
'use strict'

// 获取所有需要校验的表单
var forms = document.querySelectorAll('.needs-validation')

// 遍历表单处理校验逻辑
Array.prototype.slice.call(forms)
    .forEach(function (form) {
        // 保留原有提交校验逻辑
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)

        // 获取表单内所有必填输入框
        var inputs = form.querySelectorAll('input[required]')
        // 给每个输入框添加实时校验监听
        Array.prototype.slice.call(inputs)
            .forEach(function(input) {
                input.addEventListener('input', validateField)
                input.addEventListener('blur', validateField)

                function validateField() {
                    // 触发当前字段的原生校验
                    var isValid = input.checkValidity()
                    // 获取输入框的父容器
                    var parent = input.closest('.form-floating')
                    if (parent) {
                        // 根据校验结果切换Bootstrap校验类
                        if (isValid) {
                            parent.classList.remove('was-validated')
                            input.classList.remove('is-invalid')
                            input.classList.add('is-valid')
                        } else {
                            parent.classList.add('was-validated')
                            input.classList.remove('is-valid')
                            input.classList.add('is-invalid')
                        }
                    }
                }
            })
    })
})()

效果说明 #

• 输入单个字符时，输入框显示Bootstrap红色无效样式，同时展示对应无效反馈提示
• 输入字符数达到要求（姓名≥2、用户名≥5等）时，自动切换为绿色有效样式，隐藏无效提示
• 保留原有表单提交校验逻辑，确保提交时所有字段符合要求

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