因为jQuery没有包含，所以麻烦就大了。在输入中添加一个HTML5信用卡模式，Bootstrap 4将显示相应的invalid-feedback消息...
https://jsfiddle.net/uq4rb7zy/

<form class="needs-validation" novalidate="" method="POST">
      <div class="col-md-4 mb-3">
         <label for="cc-number">Credit card number</label>
         <input type="text" class="form-control" id="cc-number" required="" pattern="[0-9]{16}">
         <div class="invalid-feedback">
            Credit card number is required and must be 16 digits
         </div>
      </div>
      <hr class="mb-4">
      <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
    </form>

*EDIT*Bootstrap不提供单独的验证消息。但是，您可以使用HTML5验证API执行类似操作...

(function() {
  'use strict';
  window.addEventListener('load', function() {

    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
          var ele = form.getElementsByTagName("input")
            for (var i = 0; i < ele.length; i++) {
                var msg = "", reason = ele[i].validity;
                if (reason.valueMissing) {
                   msg = ele[i].getAttribute("data-value-missing");
                }
                else if (reason.patternMismatch) {
                   msg = ele[i].getAttribute("data-pattern-mismatch");
                }
                else {
                    // other reason...
                }
                ele[i].nextElementSibling.innerText=msg;
            }
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

然后在输入上添加data-value-missing和data-pattern-mismatch消息...

<input type="text" class="form-control" id="cc-number" required="" pattern="[0-9]{16}" data-value-missing="A credit card number is required" data-pattern-mismatch="The credit card number must be 16 digits">
<div class="invalid-feedback"></div>

Demo on Codeply
这将只提供基于ValidityState的不同消息（例如，必需与模式）。它不会匹配模式失败的特定原因（例如，数字与字符）。

我有这个脚本限制电话号码和DNI（来自西班牙的文档身份）

<script>
        // Funcion para limitar el numero de caracteres de un textarea o input
                function limitar(e, contenido, caracteres)
                {
                    var unicode=e.keyCode? e.keyCode : e.charCode;

                    if(unicode==8 || unicode==46 || unicode==13 || unicode==9 || unicode==37 || unicode==39 || unicode==38 || unicode==40)
                        return true;
                    // Si ha superado el limite de caracteres devolvemos false
                    if(contenido.length>=caracteres)
                        return false;
                    return true;
                }

        //Funcion ONLY NUMBERS
            function numbersonly(myfield, e, dec){
            var key;
            var keychar;

            if (window.event)
               key = window.event.keyCode;
            else if (e)
               key = e.which;
            else
               return true;
            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || 
                (key==9) || (key==13) || (key==27) )
               return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
               return true;

            // decimal point jump
            else if (dec && (keychar == "."))
               {
               myfield.form.elements[dec].focus();
               return false;
               }
            else
               return false;
        }

        $(function(){           
            if (!Modernizr.inputtypes.date) {
            // If not native HTML5 support, fallback to jQuery datePicker

                $('input[type=date]').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    yearRange: '-100:+0',
                    // Consistent format with the HTML5 picker
                    dateFormat : 'dd-mm-yy'
                    },
                    // Localization
                    $.datepicker.regional['es']
                );
            }
        });

    </script>

检查代码，确保它能工作，然后你只需要像这样在输入中调用函数

<input type="text" class="form-control" name="inputDNI" placeholder="DNI" onKeyUp="return limitar(event,this.value,9)" onKeyDown="return limitar(event,this.value,9)" required>