Bootstrap 4 使用自定义消息验证信用卡

Question

我正在使用 bootstrap 4 验证。如何验证信用卡号必须是数字且必须是 16 位数字并显示适当的消息？

我想显示三个单独的消息。 1. 如果输入注释，"Credit card number is required" 2. 如果用户输入 "xyz etc"，则 "numbers only" 3. 如果用户输入少于 16 个数字，则显示消息为“"CC must be 16 digits" . 我们如何显示多个自定义消息？

请参阅fiddle。谢谢！

<html lang="en">
  <head> 
  </head>
  <body class="bg-light">

<form class="needs-validation" novalidate>
<div class="col-md-4 mb-3">
            <label for="cc-number">Credit card number</label>
            <input type="text" class="form-control" id="cc-number" placeholder="" required>
            <div class="invalid-feedback">
              Credit card number is required
            </div>
          </div>
<hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
  <script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';

    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      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();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>
</body>

https://jsfiddle.net/6p3th7zz/10/

Answer 1

我有这个脚本来限制 phone 号码和 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>

Answer 2

fiddle 已损坏，因为未包含 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 提供不同的消息（例如，必需与模式）。它不会匹配模式失败的具体原因（例如数字与字符）。

Bootstrap 4 使用自定义消息验证信用卡

Bootstrap 4 validating credit card with custom messages

html

validation

twitter-bootstrap

html5-validation

bootstrap-4