Học JavaScript qua ví dụ part 89 pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (655.2 KB, 7 trang )
ptg
17.5 Form Validation with Regular Expressions 777
17.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.
EXAMPLE 17.44
<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)){
return true;
}
Continues
EXPLANATION ( CONTINUED)
From the Library of WoweBook.Com
ptg
778 Chapter 17 • Regular Expressions and Pattern Matching
else{
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>
EXPLANATION
1 The regular expression reads: Start at the beginning of the string, look for an option-
al literal opening parenthesis, followed by exactly three digits, and an optional 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.
EXAMPLE 17.44 (CONTINUED)
From the Library of WoweBook.Com
ptg
17.5 Form Validation with Regular Expressions 779
Go to o, 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 o/ 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).
From the Library of WoweBook.Com
ptg
780 Chapter 17 • Regular Expressions and Pattern Matching
For 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.
From the Library of WoweBook.Com
ptg
17.5 Form Validation with Regular Expressions 781
17.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 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 ().
• At least one dot between the address and domain name ( .com, .mil, .edu, .se).
• At least six characters ().
3
Examples of valid e-mail addresses:
•
•
•
•
•
•
To break down a simple e-mail regular expression
/^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-zA-Z]{2,4}$/;
use the following steps:
3. As of this writing, domain names have at least two characters.
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.
Step 5: ([\-\w]+)\.?)+ The mail server’s name is like the user’s name, a group
of word characters separated by a dot.
From the Library of WoweBook.Com
ptg
782 Chapter 17 • Regular Expressions and Pattern Matching
Example 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, or patri-
Step 7: $ The end of the line anchor assures that no extra char-
acters can be added onto the end of the e-mail address.
EXAMPLE 17.45
<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!!
3 if(regex.test(eform.user_email.value)){
4 return true;
}
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>
</form>
</body>
</html>
From the Library of WoweBook.Com
ptg
17.5 Form Validation with Regular Expressions 783
17.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-
lowed when creating card numbers, such as how many numbers there are, what prefix
EXPLANATION
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 . 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-
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.
From the Library of WoweBook.Com
