javascript - Amex & CC 格式化 Javascript - 让我们一劳永逸地解决这个问题

Question

我正尝试在用户将信用卡输入字段时对其进行格式化。我已经阅读了关于堆栈溢出的所有主题，查看了大量的网站、大量的库和它们背后的代码。我想创建一个简单的函数，在用户使用 VANILLA JAVASCRIPT 将信用卡输入字段时格式化信用卡。以下一些代码来自 Stack Overflow 上的主题，但没有一个线程解决了用户在字段中输入时执行此操作的特定问题。

问题:默认情况下，当用户在给定的信用卡字段中输入时，它会通过在数字之间放置空格来更改值，直到所有已输入数字，因此在完成之前不会调整格式。我试过在没有空格的情况下转换值并在每个周期重新测试它但无济于事。

function cc_format(v) {
        //Strip the field value of spaces.
        amextest = v.replace(/\s/g, '');
        //Test if the card is an american express each cycle
        if(/3[47]\d{2}[ -]*\d{6}[ -]*\d{5}/.test(amextest))
        {
         //This is some borrowed code to format american express cards - http://stackoverflow.com/questions/27322733/javascript-regex-format-string-containing-american-express-card-number
            v.replace(/\b(\d{4})(\d{6})(\d{5})\b/, '$1-$2-$3');
            return v;
        }
        else 
        {
           //This properly formats every other card type as its being typed.
            var v = v.replace(/[^\d]/g, '').match(/.{1,4}/g);
            return v ? v.join(' ') : '';
        }
    }

    //This binds the function to an input
    document.getElementById('credit_card').oninput = function() {
        this.value = cc_format(this.value)
    }

求助stack overflow的大神们，帮我一劳永逸吧!

Answer 1

编辑:忘了 OP 想要纯 JS。我会留在这里供后代使用，但这显然不是答案。

您可以试试这个 - 匹配前两位数字，然后在第 4 位数字后自动更新输入(并防止输入超过 17 个字符(15 位数字和 2 个破折号):

$('#cc').on('keyup', function() {
  var amexTest = $(this).val().replace(/ /g, '');
  if (amexTest.match(/^3[47]\d{2}/)) {
    if (amexTest.length == 4) {
      amexTest += '-';
      $('#cc').val(amexTest);
    }
    if (amexTest.length == 11) {
      amexTest += '-';
      $('#cc').val(amexTest);
    }
    if (amexTest.length > 17) {
      val = $(this).val().substr(0, $(this).val().length - 1);
      $(this).val(val);
    }
  } else {
    if (amexTest.length > 16) {
      val = $(this).val().substr(0, $(this).val().length - 1);
      $(this).val(val);
    }
    if (amexTest.length == 16) {
      var splits = amexTest.match(/\d{4}/g);
      val = splits.join(' ');
      $(this).val(val);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cc">