输入号码时识别信用卡横幅

问题描述

我正在开发一个系统，用户必须通过信用卡付款。当他开始输入卡片上的第一个数字时，旗帜将被自动识别和选择。我不太了解 jQuery 或 JavaScript。

var cartoes = {
   visa: /^4[0-9]{12}(?:[0-9]{3})/,mast: /^5[1-5][0-9]{14}/,diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}/,amex: /^3[47][0-9]{13}/,discover: /^6(?:011|5[0-9]{2})[0-9]{12}/,hipercard: /^(606282\d{10}(\d{3})?)|(3841\d{15})/,elo: /^((((636368)|(438935)|(504175)|(451416)|(636297))\d{0,10})|((5067)|(4576)|(4011))\d{0,12})/
};

问题是在输入flag时它不起作用，也就是说，他没有在我输入卡号时选择flag。我尝试使用我拥有的卡：万事达卡、美国运通卡和维萨卡。我把完整的代码放上来。

var cartoes = {
  visa: /^4[0-9]{12}(?:[0-9]{3})/,12})/
};
document.getElementById('num').addEventListener('keyup',testarCC);
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');

function testarCC(e) {
  var nr = this.value;
  var tipo;
  for (var cartao in cartoes)
    if (nr.match(cartoes[cartao])) tipo = cartao;
  // alert(tipo);
  if (tipo) document.getElementById(tipo).click();
  else
    for (var i = 0; i < inputs.length; i++) inputs[i].checked = false;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <Meta charset="UTF-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Testando a Braspag</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>

<body>
  <fieldset class="fsResDir">
    <legend>Dados do Cartão&nbsp;</legend>
    <input type="radio" name="RadBand" id="visa" />
    <label for="visa">
            <img src="bandeiras/visa.png" style="width: 90px" />
        </label>
    <input type="radio" name="RadBand" id="mast" />
    <label for="mast">
            <img src="bandeiras/mastercard.png"  style="width: 90px"/>
        </label>
    <input type="radio" name="RadBand" id="amex" />
    <label for="amex">
            <img src="bandeiras/amex.png"  style="width: 90px"/>
        </label>
    <label for="val" class="lab90">Validade:</label>
    <input type="text" class="ent20Form" id="val" name="TxtValMes" class="form-control" />/
    <input type="text" class="ent40Form" name="TxtValAno" class="form-control" />
    <label for="num" class="lab90">Numero:</label>
    <input type=text class="ent120Form" id="num" name="TxtNumero" class="form-control" />
  </fieldset>
</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript