Question

好的，所以我有一个html表单，显示如下：

   <span style='required'>*</span> - Indicates required field.
   <div class='fields'>Swiped Information</div>
     <input type=text name='swiped' id='swiped'>
   </div>
   <div class='fields'>First Name</div>
    <input type=text name='first_name' id='first_name'><span style='required'>*</span>
   </div>
   <div class='fields'>Last Name</div>
    <input type=text name='last_name' id='last_name'><span style='required'>*</span>
   </div>
   <div class='fields'>Expiration</div>
    <input type=text size=8 name='expiration' id='expiration'><span style='required'>*</span>(MMYY)
   </div>
   <div class='fields'>CVV Code</div>
    <input type=text size=8 name='cvv' id='cvv'><span style='required'>*</span>
   </div>
   <div class='fields'>Credit Card Number</div>
    <input type=text name='card' id='card'><span style='required'>*</span>
   </div>
   <hr>
   <div class='buttons'></div>
    <a onclick="readCard();" style="cursor:pointer; color:red;">Swipe Credit Card</a>
   </div>

我对这种东西的了解很差。我有一个基本的小信用卡读卡器，可以通过USB插入我的电脑。我希望能够刷信用卡并让我的网站将信息解析到上面的表单字段中。

我已将onclick=readCard();事件添加到我表单下方的链接中，当推送时，会启动java脚本以将焦点放在Swiped Information字段上，该字段将存储来自磁条的数据字符串读者。

function readCard () {

   document.getElementById('swiped').focus();

}

我的想法是，员工会点击“刷卡信用卡”，这会使刷卡信息字段有焦点，并用字符串填充该字段，然后javascript会将这些信息分解成碎片并填写表格因此。

我已经搜索了高低，试图找到一个解决方案，我最接近的是一个使用asp.net作为语言的教程，我不能这样做。 PHP或JavaScript。提前谢谢。

我需要做的就是将长串打破多个并在html表单中显示相应的部分。

P.S。我并不担心表单验证ATM，我会在填写表单字段之后处理它！谢谢！

更新：

我创建了一个JSFiddle，虽然我输入的java脚本似乎不起作用。 http://jsfiddle.net/r8FJX/

更新：

根据以下评论，我添加了从读卡器发送到计算机的数据示例。我进去并用随机输入的假数字替换了字符串中的每个数字，并用假的替换了我的名字。（对不起诈骗者！）

%B6545461234613451^DOE/JOHN^00000000000000000000000?;6545461234613451=984651465116111?

我假设上面的代码是如何布局的，我找不到任何文档：

%Bcardnumber^lastname/firstname^expDate?;cardnumber=expDate?

Answer 1

选项1）

var card_data = "%B6545461234613451^DOE/JOHN^00000000000000000000000?;6545461234613451=984651465116111?"

var details1 = card_data.split("^");

var card_number = details1[0];
card_number = card_number.substring(2);

var names = details1[1].split("/");
var first_name = names[1];
var last_name = names[0];

var details2 = details1[2].split(";");
details2 = details2[1].split("=");

var exp_date = details2[1];
exp_date = exp_date.substring(0, exp_date.length - 1);
exp_date = exp_date.substring(2, 3) + "/" + exp_date.substring(0,1);

选项2）

var pattern=new RegExp("^\%B(\d+)\^(\w+)\/(\w+)\^\d+\?;\d+=(\d\d)(\d\d)\d+$");
var match = pattern.exec(card_data);

card_number = match[1];
first_name = match[3];
last_name = match[2];
exp_date = match[5] + "/" + match[4];

然后做：

document.getElementById("first_name").value = first_name;
document.getElementById("last_name").value = last_name;
document.getElementById("card").value = card_number;
document.getElementById("expiry").value = exp_date;

Answer 2

我在过期日期成功了：

exp_date = exp_date.substring（2,4）+“/”+ exp_date.substring（1,3）;

Answer 3

仅限像我这样的未来观众正在搜索。到期需要调整。这将使到期看起来像...... 10/18。不是像我一样得到的10/81 ......

下面显示了更正的格式化日期：10/18而不是10/81或1/1

exp_date = exp_date.substring(2, 4) + "/" + exp_date.substring(0,2);

Answer 4

（对于未来尝试解析USB信用卡读卡器数据的人）

有两个（有时是3个）数据轨道，它们用?分隔。到期日期在第一首曲目和第二首曲目上重复。如果您想要读取足够的数据来为信用卡收费，您可以忽略Track 2数据（;以后的所有内容）。

CVC未存储在磁条数据上。您必须在付款处理器中停用CVC检查。使用Stripe，您可以在https://dashboard.stripe.com/radar/rules处执行此操作。

let parse = readerData => {
    let card = readerData.match(/%B([0-9]+)\^([A-Z /.]+)\/([A-Z /.]*)\^([0-9]{2})([0-9]{2})/);

    let lastName = card[2].trim();
    // 'LASTNAME/FIRSTNAME.MR' is possible
    let firstName = card[3].trim().split('.')[0];
    let fullName = `${firstName} ${lastName}`;

    return {
        exp_month: card[5],
        exp_year: card[4],
        number: card[1],
        name: fullName,
    };
}

parse('%B6545461234613451^DOE/JOHN^21040000000000000000000?;this part does not matter')
// {exp_month: "04", exp_year: "21", number: "6545461234613451", name: "JOHN DOE"}

如果您正在使用Stripe.js v2，则可以将parse()返回的对象直接传递给Stripe.card.createToken()。

我在示例数据中看到LASTNAME/FIRSTNAME MIDDLENAME，此代码应将其转换为FIRST MIDDLE LAST。

阅读https://en.wikipedia.org/wiki/Magnetic_stripe_card#Financial_cards了解详情。

我不知道这样做是legal。较新的USB信用卡读卡器会对他们读取的数据进行加密（您必须将数据发送到他们的api（并付费）以解密它。）

如果您遇到正则表达式问题，请尝试https://regex101.com/进行调试。

使用javascript从磁条阅读器解析信用卡数据

4 个答案: