使用javascript从磁条读取器解析信用卡数据 [英] Parsing Credit Card data from magnetic stripe reader using javascript

问题描述

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

Ok, So I have an html form that is displayed like so:

   <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插入计算机.我希望能够刷信用卡并让我的网站将信息解析为上方的表单字段.

My knowledge of this kind of stuff is very poor. I have a basic little Credit Card Reader that plugs into my computer via USB. I am wanting to be able to swipe a credit card and have my website parse the information into the form fields that are above.

我在表单下方的链接中添加了onclick=readCard();事件，当按下该事件时，将启动Java脚本以将焦点放在Swiped Information字段上，该字段将存储来自磁条读取器的数据字符串.

I have added an onclick=readCard(); event to a link below my form and when that is pushed java script is initiated to put focus on the Swiped Information field which will store the string of data from the magnetic stripe reader.

function readCard () {

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

}

我的想法是，该员工将点击刷卡"，这将使刷卡信息"字段具有焦点并用字符串填充该字段，然后javascript将这些信息分解成几部分并填写表格因此.

My thoughts would be that the employee would hit "Swipe Credit Card" which would make the Swiped Card Information field have focus and would fill that field with the string, then the javascript would break that information up into pieces and fill the form accordingly.

我已经搜寻了很多东西，试图找到一个解决方案，而我能找到的最接近的是一个使用asp.net作为语言的教程，但我做不到. PHP或JavaScript.预先感谢.

I have searched high and low to try and find a solution and the closest I could come was a tutorial that used asp.net as the language and I can't do that. Either PHP or JavaScript. Thanks in advance.

我要做的就是将长字符串分成多个部分，并以html形式显示相应的部分.

All I need to do is break that long string up into multiple and display the appropriate parts in the html form.

P.S.我不担心表单验证ATM，在设法使它填充表单字段后，我会照顾好它！谢谢！

P.S. I'm not worried about form validation ATM, I will be taking care of that after I manage to make it fill the form fields! Thanks!

更新:

我创建了一个JSFiddle，尽管我输入的Java脚本似乎无法正常工作. http://jsfiddle.net/r8FJX/

I created a JSFiddle although the java script I put in doesn't appear to be working. http://jsfiddle.net/r8FJX/

更新:

根据下面的评论，我添加了一个示例，说明了从读卡器发送到计算机的数据.我进去，用随机输入的假数字替换了字符串中的每个数字，然后用假数字替换了我的名字. (抱歉，骗子！)

As per the comments below, I have added an example of the data sent from my card reader to the computer. I went in and replaced every number in the string with randomly typed fake numbers and replaced my name with a fake one. (Sorry scammers!)

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

我假设这是上面代码的布局方式，我找不到任何文档:

I am assuming this how the code above is laid out, I can't find any documentation:

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

推荐答案

选项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;

这篇关于使用javascript从磁条读取器解析信用卡数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！