3 The regular expression test method takes the value of the user input, user_email.value, and returns true if the pattern in the regular expression matched the user’s input.. The value
Trang 117.5.8 Credit Card Validation
When validating a credit card number, you can do some preliminary checking but real
card validation is done on the server side through a software product designed
specifi-cally for that purpose.4 Before issuing a card, there are certain rules that must be
fol-E X P L A N A T I O N
1 A function called ok_Email is defined It takes one parameter, a reference to the
form started on line 6
2 This got the highest score at http://www.regexlib.com When you are looking for
a regular expression that covers all possibilities, you might spend a week and
still not have caught everything This is where the libraries come in handy
Somebody has already done the hard work
3 The regular expression test() method takes the value of the user input,
user_email.value, and returns true if the pattern in the regular expression matched
the user’s input
4 The e-mail address entered is tested to be valid A true value is returned and the
form will be submitted to the server A valid e-mail address does not mean that if
mail is sent to that address it will necessarily be delivered; for example,
san-ta@northpole.org is syntactically valid, but there is no guarantee that santa is a real
user (unless you still believe!)
5 If an invalid e-mail address was entered, the alert box will appear with this
mes-sage The ok_Email() function will return false, and the form will not be
submit-ted
6 The form named formtest starts here.
7 This is the URL of the CGI script that will be called on the server side when the
form is submitted
8 The onSubmit event handler is triggered when the user clicks the submit button.
The value assigned to the event is a function called ok_Email that will return true
if the e-mail address is valid and false, if not The form will be sent to the server
only if the return value is true See Figure 17.49.
Figure 17.49 The user enters a valid e-mail address.
Trang 2is used by a particular card type, whether the entire number fits a certain formula, and
valid expiration dates For preliminary checking, you can test, for example, to see if a
person enters valid digits for a Visa card and that the expiration date is later than the
current date, but you can’t really tell if the user’s card has gone over the limit, was
can-celled or stolen, or that he or she even owns it Checking whether the card is active
and has a sufficient balance to cover a sale is performed by the banking system backing
the card
The Expiration Date of the Card. A valid expiration date is a month and year that
haven’t gone by The month and year are represented as two digits: 01 for January, 11
for November, and 03 for the year 2003 The following example defines a function to
test for a valid expiration date based on a one- to two-digit month and a two-digit or
four-digit year
4 For a guide to credit card validation software, go to http://www.winsite.com/business/cc/.
E X A M P L E 1 7 4 6
<html>
<head><title>Testing Expiration Dates</title>
<script type="text/javascript">
1 function validExpire(form) {
3 var thismonth = (now.getMonth() + 1);
5 var expireYear = parseInt(form.expireYear.value);
var yearLength = form.expireYear.value.length;
var expireMonth = parseInt(form.expireMonth.value);
if( yearLength == 2 ){
expireYear += 2000;
}
6 if ((expireMonth < thismonth && expireYear == thisyear)
|| expireMonth > 12){
alert("Invalid month");
return false;
}
7 else if ( expireYear < thisyear) {
alert("Invalid year");
return false;
} else {
return true;
} }
</script>
</head>
Trang 3<body>
8 <form name="myForm"
action="http://127.0.0.1/cgi-bin/env.cgi"
9 onSubmit="return validExpire(this)">
<p>
Enter the month (02 or 2):
<input name="expireMonth" type="text" size=5 />
</p><p>
Enter the year (2003 or 03):
<input name="expireYear" type="text" size=5 />
<input type="submit" value="submit" />
<input type="reset" value="clear" />
</p>
</form>
</body>
</html>
E X P L A N A T I O N
1 A function called validExpire() is defined It takes one parameter, a reference to a
form Its purpose is to validate the expiration date of a credit card
2 A new Date object is created and assigned to the variable called now.
3 Using the getMonth() method, we get this month (months start at zero) and add 1.
4 Using the getFullYear() method, we get the current year, as 2003.
5 The parseInt() function converts the expiration year, as typed in by the user, to an
integer Then we get the length of the year, and convert the month into an integer
If the number of characters in the year, yearLength, is 2, then 2000 is added to the
expireYear value If the user typed 02, then the new value is 2002.
6 If the value of expireMonth is less than the value of thisMonth and the value of
ex-pireYear is equal to the value of thisyear, or the value of expireMonth is greater than
12, the number entered is invalid So a card is invalid if it has a month prior to
this month and the card expires this year, or the month is over 12, because there
are only 12 months in a year
7 If the expiration year is prior to this year, it is also invalid
8 The form starts here
9 The onSubmit event handler is triggered after the user fills out the form and clicks
the submit button When he or she does, the function called validExpire() is
called It will return true if the expiration date is valid, and the form will be sent
to the URL assigned to the action attribute of the form See Figure 17.50.
E X A M P L E 1 7 4 6 (C O N T I N U E D)
Trang 4Figure 17.50 The form before the user enters anything (left); the user enters a month and
year, but the month has already gone by (right).
Checking for Valid Type, Prefix, and Length. In Figure 17.51 the major credit
cards are listed along with the identifying characteristics of account numbers for each
All the characters must be numbers Each type of card has a prefix value; for example,
MasterCard’s prefix is a number between 51 and 56, and Visa’s is the number 4
Vali-dation routines to check for a prefix and the correct number of characters are shown
in Example 17.47
These are steps for credit card validation:
1 Remove any spaces or dashes, then test that the result is a numeric value
2 Check to see if the user has selected a valid credit card type such as MasterCard
or Visa, the correct prefix for the card, and a valid length for the number of characters in the card
3 Apply the Lunh formula for further validation
E X A M P L E 1 7 4 7
<html>
<head><title>Checking for Valid CC Type and Length</title>
<script type="text/javascript">
1 function checkCC(myForm){
var cc_type;
var cc_length;
2 if (myForm.select1.selectedIndex==0){
cc_type="Visa";
} else if( myForm.select1.selectedIndex==1){
cc_type="MasterCard";
}
Trang 5else if( myForm.select1.selectedIndex==2){
cc_type="Discover";
} else { alert("You didn't select a card type.");
}
3 cc_length=myForm.text.value.length;
5 case "Visa" :
return true;
} else{
alert("Invalid length");
return false;
} break;
7 case "MasterCard":
if ( cc_length == 16){
return true;
} else{
alert("Invalid length");
return false;
} break;
8 case "Discover":
if ( cc_length == 16){
return true;
} else{
alert("Invalid length");
return false;
} break;
default:
alert("Invalid type");
return false;
break;
} }
</script>
</head>
<body bgcolor="lightblue">
<big>
Continues
E X A M P L E 1 7 4 7 (C O N T I N U E D)
Trang 69 <form name="form1" onSubmit="return checkCC(this);">
Please select a credit card from the menu:
<p>
10 <select name="select1" size="3">
<option value="Visa">Visa</option>
<option value="MC">MasterCard</option>
<option value="Dis">Discover</option>
</select>
<p>
Please enter your card number:
</p><p>
11 <input type=textbox name="text" size=30 />
</p>
12 <input type=submit value="Check card">
<input type=reset>
</form>
</big>
</body>
</html>
E X P L A N A T I O N
1 A function called checkCC() is defined It takes one parameter, a reference to a form.
2 If the value of selectedIndex is 0, the first option in the select list was chosen, a Visa
card The rest of the statements in this if block check to see which card was
select-ed if it wasn’t this one
3 The variable cc_length is assigned the number of characters that were typed into
the text box; that is, the number of characters in the credit card number
4 The switch statement will be used to check for valid card number lengths for
whichever card the user selected from the select menu The variable cc_type
con-tains the card type: Visa, MasterCard, or Discover
5 If the card is a Visa card, the case statements will be used to check for a valid
length
6 The valid length for the Visa credit card number is between 13 and 16 characters
(as shown in Figure 17.51) If the card number length is between these numbers,
true is returned.
7 MasterCard is checked here Its number must consist of 16 characters
8 Discover is checked here Its number must consist of 16 characters
9 The form starts here The onSubmit handler will be triggered when the user clicks
the submit button At that time the credit card will be checked for a valid number
of characters in the number provided by the user This is not a complete check
You can combine the other functions from this section to provide a more thorough
check; we haven’t checked here to see if the value entered is numeric, has strange
characters, or empty fields
E X A M P L E 1 7 4 7 (C O N T I N U E D)
Trang 710 The select menu starts here with three options, each a credit card type
11 This is the text box where the user enters the card number
12 When the user clicks the submit button, the onSubmit handler is invoked, and if
the credit card number passes the validity test, off goes the form! See Figure 17.52
Figure 17.51 Some valid credit cards, their prefix, length, and whether they pass the
Lunh test based on modulus 10, shown later Source:
http://www.beachnet.com/~hstiles/cardtype.html.
Figure 17.52 The number of characters in the credit card number should be 16 for
Discover Card.
E X P L A N A T I O N (C O N T I N U E D)
Trang 8The Lunh Formula. The credit card number can be subjected to an additional
math-ematical test, called the Lunh formula, which it must pass to be valid The following
steps are required to validate the primary account number:
Step 1: Double the value of every other digit starting with the next-to-rightmost
digit
Step 2: If any of the resulting values has more than two digits, then its digits must
be added together to produce a single digit
Step 3: Add the sum of all the digits not doubled in Step 1 to the sum of the digits
transformed from Steps 1 and 2
Step 4: If the result is exactly divisible by 10 (i.e., if the result ends in a zero, 30, 40,
50, etc.), then the number is valid—providing of course that it’s of the cor-rect length and bears a corcor-rect prefix for that type of card
For example, to validate the primary account number 49927398716:
Step 1: Starting from the next to the right-most digit, multiply every other number
by 2 (the number in bold text)
4 9 9 2 7 3 9 8 7 1 6 9x2 2x2 3x2 8x2 1x2
Step 2: If any numbers resulting from Step 1 have more than one digit, add those
numbers together
(1+8) (1+6)
————————————
Step 3: Add up the top row of numbers that were not doubled (not in bold) to the
bottom row of numbers after Step 2 was finished Bottom numbers are in parentheses
4 + (9) + 9 + (4) + 7 + (6) + 9 +( 7) + 7 + (2) + 6
Step 4: If the result of Step 3 is divisible exactly by 10 (i.e., leaves no remainder),
the card is valid The result of Step 3 is 70 The card number is valid if the card type is valid, as long as the length of numbers entered is valid, and it has the correct prefix for that type of card
Trang 917.5.9 Putting It All Together
After writing the functions that validate each field of the form, they will be put together in
a single script to check all form entries Example 17.48 combines just two of the functions,
to keep the example from being too large One function, ok_Form(), calls the functions
that check individual entries; for example, ok_Email() checks for valid e-mail and returns
either true or false, and ok_Phone() checks for a valid phone number After all of the entries
have been checked, the ok_Form() function returns either true or false to the onSubmit
event handler If ok_Form() returns true, the form will be submitted to the server; if not, it
is stopped If we add in all the credit card validation functions, this program will get really
large Why don’t you try it?
E X A M P L E 1 7 4 8
<html>
<head><title>Validating a Form</title>
<script type="text/javascript">
1 function ok_Email(emform){
/^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-zA-Z]{2,4}$/;
3 if(regex.test(eform.user_email.value)){
return true;
} else{
alert("Enter a valid email address");
return false;
} }
4 function ok_Phone(phform){
5 var regex = /^\(?\d{3}\)?-?\s*\d{3}\s*-?\d{4}$/;
6 if(regex.test(phform.value)){
return true;
} else{
return false;
} }
7 function ok_Form(myform){
8 if (ok_Email(myform.user_email)== false){
9 alert( "Invalid email address");
10 myform.user_email.focus();
11 myform.user_email.select();
}
Continues
Trang 1013 if (ok_Phone(myform.user_phone) == false){
alert( "Invalid phone number");
myform.user_phone.focus();
myform.user_phone.select();
return false;
}
}
</script>
</head>
<body bgcolor="lightgreen"> <font face="arial" size="+1">
<hr />
<h2> Checking Form Input</h2>
<form name="myform"
action="http://localhost/cgi-bin/environ.pl"
method="post"
15 onSubmit="return ok_Form(this);">
<p>
Please enter your email address: <br />
<input type="text" size=40 name="user_email" />
</p><p>
Please enter your phone number: <br />
<input type="text" size=12 name="user_phone" />
</p>
<input type=submit value="Send" />
</form>
</font>
</body>
</html>
E X P L A N A T I O N
1 The function to validate an e-mail address is defined It is called by the ok_Form()
function on line 7
2 The local variable called regex is assigned a regular expression, explained in
Ex-ample 17.45
3 The e-mail address entered by the user, eform.user_email.value, is tested against
the regular expression for validity The regular expression test() method returns
true or false to the ok_Form function, line 7
4 The function to validate a phone number is defined It is called by the ok_Phone()
function on line 13
5 The local variable called regex is assigned regular expression.
6 The phone number entered by the user, eform.user_phform.value, is tested against
the regular expression for validity The regular expression test() method returns
true or false to the ok_Phone function, line 13
E X A M P L E 1 7 4 8 (C O N T I N U E D)