3 The regular expression test method will return true if a valid Social Security number was entered and false if not.. 4 If nothing was entered in the text box, the user will be alerted
Trang 117.5.6 Checking for Valid Phone Numbers
A valid U.S phone number has ten digits: an area code of three digits, followed by the
subscriber number of seven digits There might be parentheses surrounding the area
code, and dashes or spaces separating the numbers in the subscriber number With
reg-ular expressions you can test for any or all of these conditions and then, if necessary,
remove the extraneous characters, leaving just numbers Example 17.44 demonstrates
how to validate a simple U.S phone number
3 The regular expression test() method will return true if a valid Social Security
number was entered and false if not.
4 If nothing was entered in the text box, the user will be alerted, focus will go to the
text field, and the form will not be submitted
5 The onSubmit event handler will be triggered when the user clicks the submit
but-ton of line 7
6 The input type is a text field that will hold up to 11 characters
7 When the user clicks the submit button, the onSubmit event handler will be
trig-gered It will call the okSocial() function to validate the Social Security number
See Figure 17.45
Figure 17.45 The user enters a valid Social Security number.
E X A M P L E 1 7 4 4
<html>
<head><title>Validating Phone Numbers</title>
<script type="text/javascript">
function ok_Phone(phform){
1 var regex = /^\(?\d{3}\)?-?\s*\d{3}\s*-?\d{4}$/;
2 if(regex.test(phform.user_phone.value)){
E X P L A N A T I O N (C O N T I N U E D)
Trang 2else{
alert("Enter a valid phone number");
return false;
} }
</script>
</head>
<body>
<hr />
<h2>Checking for a Valid Phone Number </h2>
3 <form name="formtest"
action="http://localhost/cgi-bin/environ.pl"
method="post"
4 onSubmit="return ok_Phone(this);">
<p>
Please enter your phone: <br />
5 <input type="text" size=40 name="user_phone" />
</p>
<input type=submit value="Submit" />
<input type=reset value="Clear" />
</form>
</body>
</html>
E X P L A N A T I O N
1 The regular expression reads: Start at the beginning of the string, look for an
option-al literoption-al opening parenthesis, followed by exactly three digits, and an optionoption-al
clos-ing parenthesis (the area code), followed by an optional dash, zero or more spaces,
exactly three digits, zero or more spaces, an optional dash, and ending in exactly
four digits, such as (222)-111-2345 or 222-111-2345 or 2221112345
2 The regular expression is matched, phform.user_phone.value, the test() method
will return true, and the form will be submitted; otherwise, the user will be alerted
to enter a valid phone number
3 The HTML form starts here and is named formtest.
4 The onSubmit event handler is assigned as an attribute of the <form> tag It will be
activated when the user clicks the submit button The handler, ok_Phone, passes
the form as an argument The this keyword refers to the form named formtest and
returns a true or false value If true, the form will be submitted.
5 The user will enter his or her phone number in a text field See Figure 17.46
E X A M P L E 1 7 4 4 (C O N T I N U E D)
Trang 3Go to http://www.wtng.info, the World Wide Telephone Guide, to get a listing of phone
formats for the world, country by country (see Figure 17.47)
Figure 17.47 Go to http://www.wtng.info/ to look up phone formats around the world.
Figure 17.46 The user enters a valid phone number (top) Parentheses and the dash
are optional; the user enters a number with too many digits, and an alert box
appears (bottom).
Trang 4For international phone numbers, the following formats are accepted (see Figure 17.48):
• +1 (123) 456 7888
• +1123456 7888
• +44 (123) 456 7888
• +44(123) 456 7888 ext 123
• +44 20 7893 2567
• 02345 444 5555 66
Figure 17.48 Searching for an international phone Regex at regexlib.com.
Trang 517.5.7 Checking for Valid E-Mail Addresses
When validating an e-mail address, you are looking for the typical format found in such
addresses There might be some domain names that are more than three characters, but
it isn’t typical Also, just because the user types what looks like a valid e-mail address,
that does not mean that it is; for example, the e-mail address santa@northpole.org uses a
valid syntax, but that fact does not prove that santa is a real user
E-mail addresses usually have the following format:
• An @ sign between the username and address (lequig@aol.com).
• At least one dot between the address and domain name ( com, mil, edu, se).
• At least six characters (a@b.se).3
Examples of valid e-mail addresses:
• username@mailserver.com
• username@mailserver.info
• username@mailserver.org.se
• username.moretext@mailserver.mil
• username@mailserver.co.uk
• user-name.moretext.sometext@mailserver.se
To break down a simple e-mail regular expression
/^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-zA-Z]{2,4}$/;
use the following steps:
Step 1: ^ Go to the beginning of the line
Step 2: ([\-\w]+)\.? The username consists of one or more dashes or word
characters grouped by parentheses, followed by one (or not one) literal period Because the dot is outside the parentheses, there will be either one or zero dots for the list of word characters, not two or three dots in
a row
Step 3: (([\-\w]+)\.?)+ The username can consist of more than one set of
word characters separated by a single dots, as in
Joe.Shmoe.somebody.
Step 4: @ A literal @ symbol is required in the e-mail address
Trang 6Example 17.45 uses a regular expression to check for a valid e-mail address
Step 6: [a-zA-Z]{2,4} The domain name follows the mail server’s name A single
dot separates the server from the domain The domain name consists of between two and four alphabetic
charac-ters; for example, savageman@imefdm.usmc.mil or patri-cia.person@sweden.sun.com.
char-acters can be added onto the end of the e-mail address
E X A M P L E 1 7 4 5
<html>
<head><title>Validating E-Mail Addresses</title>
<script type="text/javascript">
1 function ok_Email(eform){
2 var regex =
/^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-
\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$/;
# this got the highest rating at regexlib.com!!
} else{
5 alert("Enter a valid email address");
return false;
} }
</script>
</head>
<body>
<hr />
<h2> Checking for Valid Email Address </h2>
6 <form name="formtest"
7 action="http://localhost/cgi-bin/environ.pl"
method="post"
8 onSubmit="return ok_Email(this);">
<p>
Please enter your email address: <br />
<input type="text" size=40 name="user_email" />
</p><p>
<input type=submit value="Send" />
</p>
Trang 717.5.8 Credit Card Validation
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.