WebReference.com - Chapter 10 selections: Practical JavaScript for the Usable Web from glasshaus (2/5).

[previous] [next]

Practical JavaScript for the Usable Web

We'll take this method step by step. Note first of all, that the method takes two parameters-–the card number and the card type (mastercard, amex, and visa are valid card types that we will cater for here, though the method could be extended for other card types).

The first part of the method checks that only numbers or spaces have been entered:

var isValid = false;
var ccCheckRegExp = /[^\d ]/;
isValid = !ccCheckRegExp.test(cardNumber);

The regular expression /[^\d ]/ will match invalid characters (any character that is not a digit or a space). When we test the card number against the regular expression on the third line, as in previous methods, we use the ! character to reverse the logic, so that isValid is set to false if invalid characters are found in the card number.

The next part of the method checks that the card has a valid prefix, that is it starts with the correct numbers for that card type, and contains the correct number of digits, again specific to a card type. The prefixes and lengths for some commonly available cards are shown below:

Card Type	Prefix	Number of Digits
Visa	4	13,16
Mastercard	51-55	16
American Express	34,37	15

You can find more information on card details at https://www.beachnet.com/~hstiles/cardtype.html.

First we strip out any spaces the user may have put in their credit card number when they entered it:

if (isValid)
   {
     var cardNumbersOnly = cardNumber.replace(/ /g,"");
     var cardNumberLength = cardNumbersOnly.length;
     var lengthIsValid = false;
     var prefixIsValid = false;
     var prefixRegExp;

The if statement checks whether the previous validation (that the card number only contained numbers or spaces) found the number to be valid, and only proceeds with the next check if it did. Then, using a regular expression (a space between the / regular expression delimiters, together with the global flag g) and the String object's replace() method, we strip out the spaces.

Variable cardNumberLength is set to the length of the string (the number of digits in the string). The variables lengthIsValid and prefixIsValid will store Boolean values indicating the validity of the length and prefix checks that we do next.

We now need to check the cardType parameter of the method and, from that, decide what the prefix to the card number should be and how long the number should be. The switch statement checks the card type to see which, if any, of the known card types is found:

switch(cardType)
     {
       case "mastercard":
         lengthIsValid = (cardNumberLength == 16);
         prefixRegExp = /^5[1-5]/;
         break;
       case "visa":
         lengthIsValid = (cardNumberLength == 16 || cardNumberLength == 13);
         prefixRegExp = /^4/;
         break;
       case "amex":
         lengthIsValid = (cardNumberLength == 15);
         prefixRegExp = /^3(4|7)/;
         break;
       default:
         prefixRegExp = /^$/;
         alert("Card type not found");
     }

[previous] [next]

Created: April 15, 2002
Revised: April 15, 2002

URL: https://webreference.com/programming/javascript/practical/chap10/2.html