Bootstrap4实时输入校验：用data属性设置invalid-feedback提示

你现有代码的核心缺口是校验触发后没有定位到关联的错误提示节点、也没有根据错误类型匹配对应的提示文案，按以下修改即可实现需求，完全兼容原有服务端渲染逻辑：

修改后的JS校验代码 #

把你原来的jQuery代码段替换为以下内容即可：

<script>
  $(document).ready(function() {
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        const inputs = document.getElementsByClassName('form-control');

        Array.prototype.filter.call(inputs, function(input) {
          input.addEventListener('blur', function() {
            // 重置校验状态
            input.classList.remove('is-invalid', 'is-valid');
            // 定位当前输入框紧邻的错误提示元素，匹配现有Bootstrap结构
            const feedbackEl = input.nextElementSibling;

            if (input.checkValidity() === false) {
              input.classList.add('is-invalid');
              let errorMsg = '';
              // 匹配错误类型，读取对应data属性的提示文案
              if (input.validity.valueMissing) {
                // 必填项为空错误
                errorMsg = input.dataset.reqmsg || 'This field is required';
              } else if (input.validity.patternMismatch) {
                // 正则规则不匹配错误
                errorMsg = input.dataset.regexmsg || 'Some characters are not permitted';
              }
              // 可按需扩展其他错误类型分支：比如邮箱格式错typeMismatch、输入超长tooLong等

              // 写入错误提示
              if (feedbackEl?.classList.contains('invalid-feedback')) {
                feedbackEl.textContent = errorMsg;
              }
            } else {
              input.classList.add('is-valid');
              // 校验通过清空提示
              if (feedbackEl?.classList.contains('invalid-feedback')) {
                feedbackEl.textContent = '';
              }
            }
          }, false);
        });
      }, false);
    })()
  });
</script>

关键实现说明 #

• 节点定位：用nextElementSibling直接获取input的下一个兄弟节点，完全匹配你现有HTML里invalid-feedback紧跟在input后面的结构，不需要额外写复杂选择器；如果后续DOM结构调整，也可以替换为jQuery写法$(input).siblings('.invalid-feedback')实现相同效果。
• 错误匹配：用HTML5原生的validity状态对象判断错误类型，和checkValidity()的校验逻辑完全对齐，不需要自己手写规则判断，准确率更高。
• 属性读取：用datasetAPI读取input上的自定义data属性，写法比getAttribute更简洁，自动兼容属性名的大小写转换；如果需要兼容IE10及以下版本，换回input.getAttribute('data-reqMsg')写法即可。
• 兼容逻辑：原有PHP服务端渲染的错误提示完全不需要修改，页面初次加载时服务端返回的错误会正常展示，用户触发输入框blur事件后才会动态替换提示内容，前后端校验逻辑无冲突。

扩展提示：如果后续要增加更多校验场景的提示，只需要在input标签上加对应data属性存储文案，再在JS的错误判断分支里增加对应规则匹配即可，扩展成本极低。

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