在我的付款表单中添加信用卡验证答案

【问题标题】：Adding credit card validation to my payment form在我的付款表单中添加信用卡验证
【发布时间】：2019-06-04 15:19:08
【问题描述】：

我目前正在使用 Bootstrap 4 和默认验证。我希望为此添加 Luhn 算法验证，因此它可以正确验证提供的卡号。我有以下功能，但是我不确定如何使用 Bootstraps 验证来实现

功能：

/**
 * Luhn Test
 * https://gist.github.com/ShirtlessKirk/2134376
 */
var luhnChk = (function(arr) {
  return function(ccNum) {
    var
      len = ccNum.length,
      bit = 1,
      sum = 0,
      val;

    while (len) {
      val = parseInt(ccNum.charAt(--len), 10);
      sum += (bit ^= 1) ? arr[val] : val;
    }

    return sum && sum % 10 === 0;
  };
}([0, 2, 4, 6, 8, 1, 3, 5, 7, 9]));

function is_luhn_valid(cardNumber) {
  if (luhnChk(cardNumber) === true) {
      alert("Valid")
  } else {
      alert("Invalid")
  }
}

        var creditCardNumber = $('input[name="cardno1"]').val().replace(/\s+/g, '');

        is_luhn_valid(creditCardNumber);

引导验证文档：

https://getbootstrap.com/docs/4.0/components/forms/#validation

用于验证的 javascript 是：

(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);
    })();

【问题讨论】：

标签： jquery html validation

【解决方案1】：

欢迎加入社区。p>

使用 Luhn 算法验证信用卡号不应依赖于您使用的 CSS 框架。

我已经用 cmets 编写了一个解决方案，说明如何使用您提供的示例函数轻松实现验证。您真正需要的是一个按钮来处理单击事件并在该事件处理程序块中重新定位creditCardNumber 变量。

  var luhnChk = (function(arr) {
        return function(ccNum) {
            var
                len = ccNum.length,
                bit = 1,
                sum = 0,
                val;

            while (len) {
                val = parseInt(ccNum.charAt(--len), 10);
                sum += (bit ^= 1) ? arr[val] : val;
            }

            return sum && sum % 10 === 0;
        };
    }([0, 2, 4, 6, 8, 1, 3, 5, 7, 9]));

    function is_luhn_valid(cardNumber) {
        if (luhnChk(cardNumber) === true) {
            alert("Valid")
        } else {
            alert("Invalid")
        }
    }
    
    // This creates an event handler for the submit button in your HTML code
    $('#submitBtn').on('click', function(){
        
        // Once the user has entered their credit card number and clicked on the button...
        // the 'creditCardNumber' will fetch the the details from the input
        var creditCardNumber = $('input[name="cardno1"]').val().replace(/\s+/g, '');
        
        // It will then send the input to the 'is_luhn_valid' method to perform the actual validation
        is_luhn_valid(creditCardNumber);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="cardno1">
<button id="submitBtn">Check validity</button>

【讨论】：