如何自定义Bootstrap中form-control:valid伪类以匹配自定义正则模式

要让输入框同时满足必填要求且匹配指定pattern时显示绿色勾选，你可以从HTML属性配置、CSS选择器优化、JS手动控制这几个方向调整：

1. 基础HTML配置 #

首先确保输入框同时设置required和pattern属性，明确验证规则：

<input type="text" class="form-control" required pattern="^[A-Za-z0-9]{6,12}$" placeholder="请输入6-12位字母数字">

2. 优化CSS选择器（精准触发样式） #

Bootstrap原生的:valid伪类已经会在输入值满足required+pattern时触发，但如果你想严格限定只有同时具备这两个属性的输入框才应用验证通过样式，可以修改CSS选择器：

/* 仅对同时设置了required和pattern的输入框，在验证通过时应用样式 */
.form-control.is-valid, 
.was-validated .form-control:valid[required][pattern] {
    border-color: var(--bs-success);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

这样可以避免其他仅设置required或仅设置pattern的输入框误触发该样式。

3. 自定义JS验证（复杂场景） #

如果需要更灵活的验证逻辑（比如结合其他字段、异步校验），可以通过JS手动控制is-valid类的添加/移除：

const targetInput = document.querySelector('.form-control');
targetInput.addEventListener('input', function() {
    // 检查是否同时满足必填、pattern匹配
    const isValid = this.checkValidity() && this.hasAttribute('required') && this.hasAttribute('pattern');
    if (isValid) {
        this.classList.add('is-valid');
        this.classList.remove('is-invalid');
    } else {
        this.classList.remove('is-valid');
        this.classList.add('is-invalid'); // 可选：显示错误样式
    }
});

关键说明 #

• Bootstrap的was-validated类是给表单容器添加的，用于触发表单的原生验证状态（页面加载后就显示验证结果）；如果不需要即时显示，去掉该类即可，输入框会在用户交互后触发验证。
• checkValidity()方法是原生JS的表单验证API，会自动判断输入值是否符合required、pattern等属性的规则。

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