Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Use RegEx To Analyze Credit Card Numbers In JavaScript

TwitterFacebookRedditLinkedInHacker News

RegEx is a powerful beast. Previously I wrote how to test password strength using JavaScript and regular expressions. This time we’ll take a look at how to check credit card providers based on the credit card number entered. No, this won’t test if a credit card number is legitimate, but it will test if it was entered correctly.

A lot of this code might look familiar if you read my previous post. We’ll be using JavaScript to test regular expressions and AngularJS for determining which credit card type has been entered.

To show the credit card entered to the user, we’re going to use a glyphs from the Font Awesome library. We’ll say that invalid or inactive credit cards will have a silver color and active or valid credit cards will have a black color. The HTML behind this would look something like the following:

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="CreditCardController">
            <div style="float: left">
                <i class="fa fa-3x fa-cc-mastercard" ng-style="mastercard"></i>
                <i class="fa fa-3x fa-cc-visa" ng-style="visa"></i>
                <i class="fa fa-3x fa-cc-amex" ng-style="amex"></i>
            </div>
            <br style="clear: both" />
            <input type="text" ng-model="creditcard" ng-change="analyze(creditcard)" style="width: 200px; font-size: 20px; padding: 10px" />
        </div>
    </body>
</html>

The above code has an input box and three credit card glyph icons. There is, however, a few pieces of AngularJS code that we’ll see in a moment.

The mastercard, visa, and amex variables that you see in the ng-style tag holds all the styling information for the active credit card. The style information we’re going to use is as follows:

$scope.visa = { "color": "silver" };
$scope.amex = { "color": "silver" };
$scope.mastercard = { "color": "silver" };

Moving beyond the basic AngularJS stuff, let’s take a look at the regular expressions that will do all the grunt work. We’re going to have one regular expression per credit card that we want to test against. In this case three:

var visa = new RegExp("^4[0-9]{12}(?:[0-9]{3})?$");
var amex = new RegExp("^3[47][0-9]{13}$");
var mastercard = new RegExp("^5[1-5][0-9]{14}$");

For a Visa credit card to be valid, it must start with a four and have a total of thirteen numeric characters or start with a four and have a total of sixteen numeric characters.

For an American Express (AmEx) credit card to be valid, it must start thirty-four or thirty-seven and have fifteen total digits.

For a Mastercard credit card to be valid, it must start with any valid number between fifty-one and fifty-five and have a total of sixteen digits.

Finally we need a way to track input on the input field. This will be handled through AngularJS by using the ngChange directive. By placing ng-change="analyze(creditcard)" in the input tag it will call the analyze(value) method every time a key-stroke happens. That’s when we call our RegEx validators.

Here is the full code if you’d like to see it all put together:

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script>
            var myApp = angular.module("myapp", []);
            myApp.controller("CreditCardController", function($scope) {

                var visa = new RegExp("^4[0-9]{12}(?:[0-9]{3})?$");
                var amex = new RegExp("^3[47][0-9]{13}$");
                var mastercard = new RegExp("^5[1-5][0-9]{14}$");

                $scope.visa = { "color": "silver" };
                $scope.amex = { "color": "silver" };
                $scope.mastercard = { "color": "silver" };

                $scope.analyze = function(value) {
                    $scope.visa["color"] = visa.test(value) ? "black" : "silver";
                    $scope.amex["color"] = amex.test(value) ? "black" : "silver";
                    $scope.mastercard["color"] = mastercard.test(value) ? "black" : "silver";
                };

            });
        </script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="CreditCardController">
            <div style="float: left">
                <i class="fa fa-3x fa-cc-mastercard" ng-style="mastercard"></i>
                <i class="fa fa-3x fa-cc-visa" ng-style="visa"></i>
                <i class="fa fa-3x fa-cc-amex" ng-style="amex"></i>
            </div>
            <br style="clear: both" />
            <input type="text" ng-model="creditcard" ng-change="analyze(creditcard)" style="width: 200px; font-size: 20px; padding: 10px" />
        </div>
    </body>
</html>

Conclusion

Regular expressions are quite powerful and if you can master them, they will save you a ton of coding time. Instead of parsing through the string using tokens or some other nonsense we managed to validate our string using single lines of code.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site