Học JavaScript qua ví dụ part 89 pdf

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 regular 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 button 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 triggered. 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 optional 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 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). 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 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: 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 characters; for example, savageman@imefdm.usmc.mil or patri- cia.person@sweden.sun.com. Step 7: $ The end of the line anchor assures that no extra characters 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 followed 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 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, santa@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 submitted. 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 . 17.44 <html> <head><title>Validating Phone Numbers</title> <script type="text /javascript& quot;> function ok_Phone(phform){ 1 var regex = /^(?d{3})?-?s*d{3}s*-?d{4}$/; 2. 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. . <head><title>Validating E-Mail Addresses</title> <script type="text /javascript& quot;> 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})+)*$/; #