Bootstrap 4信用卡验证：如何配置多场景自定义提示信息

嘿，刚好做过类似的需求，给你一步步拆解怎么实现这三个自定义提示：

核心思路 #

Bootstrap 4的表单验证依赖HTML5原生的约束验证API，我们可以通过监听表单的验证事件，结合输入框的validity属性判断不同错误场景，然后替换默认的提示文本。

完整代码示例 #

HTML 结构

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="creditCard">信用卡号</label>
    <input type="text" class="form-control" id="creditCard" required minlength="16" maxlength="16" pattern="\d*">
    <div class="invalid-feedback"></div>
  </div>
  <button class="btn btn-primary" type="submit">提交</button>
</form>

这里给输入框加了几个关键属性：

• required：标记为必填项
• minlength="16" 和 maxlength="16"：严格限制长度为16位
• pattern="\d*"：只允许输入数字（*表示可输入0个或多个，配合required确保不为空）

JavaScript 逻辑

// 初始化表单验证逻辑
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // 获取目标表单和输入框
    var form = document.querySelector('.needs-validation');
    var creditCardInput = document.getElementById('creditCard');
    
    // 阻止表单默认提交，手动触发验证流程
    form.addEventListener('submit', function(event) {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
    
    // 监听输入框的验证失败事件，自定义提示文本
    creditCardInput.addEventListener('invalid', function(e) {
      var input = e.target;
      var feedbackBox = input.nextElementSibling;
      
      if (input.validity.valueMissing) {
        // 未输入内容的场景
        feedbackBox.textContent = '信用卡号为必填项';
      } else if (input.validity.patternMismatch) {
        // 输入非数字内容的场景
        feedbackBox.textContent = '仅允许输入数字';
      } else if (input.validity.tooShort || input.validity.tooLong) {
        // 长度不符合16位的场景
        feedbackBox.textContent = '卡号必须为16位';
      }
    });
    
    // 输入时实时清除错误状态，提升体验
    creditCardInput.addEventListener('input', function() {
      this.classList.remove('is-invalid');
      this.nextElementSibling.textContent = '';
    });
  });
})();

关键逻辑说明 #

1. 必填提示触发：当输入框为空时，input.validity.valueMissing会返回true，此时替换提示文本为「信用卡号为必填项」。
2. 非数字提示触发：当输入内容不符合pattern="\d*"规则时，input.validity.patternMismatch触发，显示「仅允许输入数字」。
3. 长度提示触发：当输入长度小于16位（tooShort）或超过16位（tooLong）时，显示「卡号必须为16位」。
4. 额外添加的input事件监听，能在用户开始输入时自动清除之前的错误状态和提示，让交互更流畅。

这样就能完美实现你要的三个独立提示效果啦！

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