Học JavaScript qua ví dụ part 88 pptx

ptg 17.5 Form Validation with Regular Expressions 771 17.5.4 Removing Extraneous Characters Removing Spaces and Dashes. To remove any unwanted spaces or dashes from user input, the String object’s replace() method can be used to find the characters and replace them with nothing, as shown in Example 17.39. 3 If the user didn’t enter anything at all and the field is empty, another alert will be sent to the user, and false will be returned. The form will not be submitted. 4 If the user entered only alphabetic characters in his or her name, true will be returned, and the form will be submitted. 5 This is where the HTML form starts. 6 The onSubmit handler will be triggered when the user clicks the Submit button, and the okAlpha() function will be called, passing a reference to the form called alphaTest. 7 The user enters his or her name in the text field called fname. 8 After filling out the form, the user will click the Submit button, thereby triggering the onSubmit handler on line 6. See Figure 17.40. Figure 17.40 The user has a digit in her name. She can only enter alphabetic characters, or she will see the warning. EXAMPLE 17.39 <html> <head><title>Removing Spaces and Dashes</title></head> <body bgcolor="magenta"> <big> <h2>Removing Spaces and Hyphens</h2> <script type= "text/javascript"> 1 var string="444- 33 - 12 34" 2 var regex = /[ -]+/g; 3 var newString=string.replace(regex, ""); document.write("The original string: "+string); Continues EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 772 Chapter 17 • Regular Expressions and Pattern Matching Removing Unwanted Parentheses. You might also want to remove parentheses surrounding area codes or telephone numbers. This is a relatively simple regular expression used in the replace() method, as shown in the last example. document.write("<br>The new string: "+ newString +"<br>"); </script> </big> </body> </html> EXPLANATION 1 The string contains numbers, spaces, and dashes. 2 The variable called regex is assigned a regular expression, which means: Search for one or more spaces or dashes, globally (multiple occurrences within the string). 3 The replace() method searches in the string for spaces and dashes, and if it finds any, replaces them with the empty string, “”, returning the resulting string to newString. To change the original string, the return value of the replace() method can be returned back to the original string: var string=string.replace(regex, “”). See Figure 17.41. Figure 17.41 The replace() method is used to remove any spaces or dashes. EXAMPLE 17.40 <html> <head><title>Removing Parens</title></head> <body bgcolor="magenta"> <big> <font face="arial"> <h2>Removing Unwanted Parentheses, Spaces, and Dashes</h2> <script type= "text/javascript"> 1 var string="(408)-332-1234" 2 var regex = /[() -]+/g; 3 var newString=string.replace(regex, ""); EXAMPLE 17.39 (CONTINUED) From the Library of WoweBook.Com ptg 17.5 Form Validation with Regular Expressions 773 Figure 17.42 Parentheses, as well as spaces and dashes, are removed. Numbers or letters will remain. Removing any Nondigits. A character that is not a digit can be represented as [^0- 9] or as \D in a regular expression. You might want to remove any characters that are not digits in the user’s input such as zip codes or phone numbers. This can also be done sim- ply with a regular expression and the replace() method, as shown in Example 17.41. document.write("The original string: "+string); document.write("<br>The new string: "+ newString +"<br>"); </script> </big> </body> </html> EXPLANATION 1 The string contains numbers, parentheses, spaces, and dashes. 2 The variable called regex is assigned a regular expression, which means: Search for one or more parentheses (open or closed), spaces or dashes, globally (multiple occurrences within the string). 3 The replace() method searches in the string for parentheses, spaces, and dashes, and if it finds any, replaces them with the empty string, “”, returning the resulting string to newString. To change the original string, the return value of the replace() method can be returned back to the original string: var string=string.replace(regex, “”). See Figure 17.42. EXAMPLE 17.41 <html> <head><title>Removing all Nondigits</title></head> <body bgcolor="magenta"> <big> Continues EXAMPLE 17.40 (CONTINUED) From the Library of WoweBook.Com ptg 774 Chapter 17 • Regular Expressions and Pattern Matching Removing any Nonalphanumeric Characters. A nonalphanumeric word character [^0-9a-zA-Z_], any character that is not a letter, number, or the underscore, can be represented as \W. Again we can use the replace() method to remove those characters from a string. <h3>If it's not a number, remove it!</h3> <script type = "text/javascript"> 1 var string="phone is (408)-//[332]-1234@#!!!" 2 var newString=string.replace(/\D/g, ""); document.write("The orginal string: "+string); 3 document.write("<br>The new string: "+ newString +"<br>"); </script> </big> </body> </html> EXPLANATION 1 The string contains all kinds of characters, many of which are not numbers. 2 The replace() method searches in the string for all nondigit characters, /\D/g, and if it finds any, replaces them with the empty string, “”, returning the resulting string to newString. To change the original string, the return value of the replace() method can be returned back to the original string: var string=string.replace(regex, “”); 3 The new string is displayed after all the nondigit characters were replaced with nothing (i.e., they were removed). See Figure 17.43. Figure 17.43 Only numbers will remain in the string. All other characters are removed. EXAMPLE 17.42 <html> <head><title>Removing Nonalphanumeric Characters</title></head> <body bgcolor="magenta"> <big> <h3>If it's not a number or a letter, remove it!</h3> EXAMPLE 17.41 (CONTINUED) From the Library of WoweBook.Com ptg 17.5 Form Validation with Regular Expressions 775 Figure 17.44 Any nonalphanumeric characters are removed. 17.5.5 Checking for Valid Social Security Numbers A Social Security number contains exactly nine numbers. There might be dashes to sep- arate the first three numbers and the last four numbers. The dashes should be optional. Example 17.43 demonstrates a regular expression that tests for three digits, followed by an optional dash, followed by two more digits, an optional dash, and finally four digits. The beginning and end of line anchors ensure that the user does not enter extraneous characters on either end of his or her Social Security number, such as abd444-44- 4444xyz. <script type= "text/javascript"> 1 var string="(408)-//[332]-1234@#!!!" 2 var newString=string.replace(/\W/g, ""); 3 document.write("The original string: "+string); document.write("<br>The new string: "+ newString +"<br>"); </script> </big> </body> </html> EXPLANATION 1 The string contains all kinds of characters, many of which are not letters or numbers. 2 The regular expression, /\W/g, means: Search globally for any nonalphanumeric characters (\W). The replace() method searches for nonalphanumeric characters and replaces them with the empty string, “”, returning the resulting string to new- String. To change the original string, the return value of the replace() method can be returned back to the original string: var string=string.replace(regex, “”); 3 The new string is displayed after all nonalphanumeric characters are removed. See Figure 17.44. EXAMPLE 17.42 (CONTINUED) From the Library of WoweBook.Com ptg 776 Chapter 17 • Regular Expressions and Pattern Matching EXAMPLE 17.43 <html> <head><title>Testing for a Social Security Number</title> <script type="text/javascript"> 1 function okSocial(sform){ 2 var regex=/^\d{3}-?\d\d-?\d{4}$/; 3 if ( regex.test(sform.ssn.value) == false) { alert("Social Security number invalid!"); sform.ssn.focus(); return false; } 4 if ( sform.ssn.value == ""){ alert("Please enter your Social Security number."); sform.ssn.focus(); return false; } return true; } </script> </head> <body> <big> <div align="center"> <form name="snnTest" method=post action="/cgi-bin/testing" 5 onSubmit="return okSocial(this)" /> Enter your Social Security number: xxx-xx-xxxx <p> 6 <input type="text" name="ssn" size=11 /> <p> 7 <input type="submit" value="Submit" /> <input type="reset" /> </form> </big> </div> </body> </html> EXPLANATION 1 The function okSocial() is defined. Its purpose is to validate a Social Security number. 2 The regular expression reads: Start at the beginning of the line, look for three digits, one dash (or not one), two more digits, another possible dash, and ending in four digits. From the Library of WoweBook.Com 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 . bgcolor="magenta"> <big> <h2>Removing Spaces and Hyphens</h2> <script type= "text /javascript& quot;> 1 var string="444- 33 - 12 34" 2 var regex = /[ -]+/g; 3 var newString=string.replace(regex,. <h2>Removing Unwanted Parentheses, Spaces, and Dashes</h2> <script type= "text /javascript& quot;> 1 var string="(408)-332-1234" 2 var regex = /[() -]+/g; 3 var newString=string.replace(regex,. string. <h3>If it's not a number, remove it!</h3> <script type = "text /javascript& quot;> 1 var string="phone is (408)-//[332]-1234@#!!!" 2 var newString=string.replace(/D/g,