Question

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

功能：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="product_form" method="post" action="/product" class="product">
  <span>Apples</span>
  <select class="form-control calculate" id="product" name="product">
      <option data-price="1" value="1">1</option>
      <option data-price="2" value="2">2</option>
      <option data-price="3" value="3">3</option>
      <option data-price="4" value="4">4</option>
  </select>
  <br />                    
  <span class="item-price">12.99</span>
</form>

<form name="product_form" method="post" action="/product" class="product">
  <span>Pears</span>
  <select class="form-control calculate" id="product" name="product">
      <option data-price="1" value="1">1</option>
      <option data-price="2" value="2">2</option>
      <option data-price="3" value="3">3</option>
      <option data-price="4" value="4">4</option>
  </select>
  <br />                    
  <span class="item-price">5.00</span>
</form>

<form name="product_form" method="post" action="/product" class="product">
  <span>grapes</span>
  <select class="form-control calculate" id="product" name="product">
      <option data-price="1" value="1">1</option>
      <option data-price="2" value="2">2</option>
      <option data-price="3" value="3">3</option>
      <option data-price="4" value="4">4</option>
  </select>
  <br />                    
  <span class="item-price">16.99</span>
</form>

Bootstrap验证文档：

ary.uniq.group_by { |e| e.split.first }.transform_values(&:count)
#=> {"England"=>2, "USA"=>1}

用于验证的javascript是：

/**
 * 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);

Answer 1

欢迎来到社区。

使用Luhn算法对信用卡号进行验证不应取决于您使用的CSS框架。

我已经写了一个解决方案，其中包含有关如何使用提供的示例函数轻松实现验证的注释。您真正需要的只是一个按钮来处理click事件并在该事件处理程序块中重新定位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>

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

1 个答案: