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..
Trang 117.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
re-turned, 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.
E X A M P L E 1 7 3 9
<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
Trang 2Removing Unwanted Parentheses. You might also want to remove parentheses
surrounding area codes or telephone numbers This is a relatively simple regular
expres-sion used in the replace() method, as shown in the last example
document.write("<br>The new string: "+ newString +"<br>");
</script>
</big>
</body>
</html>
E X P L A N A T I O N
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
re-turned 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.
E X A M P L E 1 7 4 0
<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, "");
Trang 3Figure 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>
E X P L A N A T I O N
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
oc-currences 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.
E X A M P L E 1 7 4 1
<html>
<head><title>Removing all Nondigits</title></head>
<body bgcolor="magenta">
<big>
Continues
Trang 4Removing any Nonalphanumeric Characters. A nonalphanumeric word
char-acter [^0-9a-zA-Z_], any charchar-acter 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>
E X P L A N A T I O N
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.
E X A M P L E 1 7 4 2
<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>
Trang 5Figure 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>
E X P L A N A T I O N
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
Trang 6<html>
<head><title>Testing for a Social Security Number</title>
<script type="text/javascript">
2 var regex=/^\d{3}-?\d\d-?\d{4}$/;
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>
E X P L A N A T I O N
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
dig-its, one dash (or not one), two more digdig-its, another possible dash, and ending in
four digits
Trang 717.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)){
return true;
}
Continues