in black and white
Main menu
Share a book About us Home
Biology Business Chemistry Computers Culture Economics Fiction Games Guide History Management Mathematical Medicine Mental Fitnes Physics Psychology Scince Sport Technics

Javascript for dummies 4th edition - Veer E.V

Veer E.V Javascript for dummies 4th edition - Wiley publishing , 2004. - 387 p.
ISBN: 0-7645-7659-3
Download (direct link): javascriptfordummies2005.pdf
Previous << 1 .. 69 70 71 72 73 74 < 75 > 76 77 78 79 80 81 .. 118 >> Next

Figure 12-1 shows you this code in action. You can experiment with these techniques by loading the list1201.htm file from the companion CD into your Web browser.
218 Part IV: Interacting with Users____________________________________________________________
Listing 12-1: A Script That Validates the E-Mail Address Pattern
<SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”>
// This function tests for the punctuation characters // (. and @) found in a valid e-mail address.
function isAValidEmail(inputValue) {
var foundAt = false var foundDot = false var atPosition = -1 var dotPosition = -1
// Step through each character of the e-mail // address and set a flag when (and if) an // @ sign and a dot are detected.
for (var i=0; i<=inputValue.length; i++) { if (inputValue.charAt(i) == "@” ) { foundAt = true atPosition = i
else if (inputValue.charAt(i) == ”.”) { foundDot = true dotPosition = i
// If both an @ symbol and a dot were found, and // in the correct order (@ must come first)...
if ((foundAt && foundDot) && (atPosition < dotPosition)) {
// It's a valid e-mail address.
alert("Thanks for entering a valid e-mail address!”) return true
else {
// The e-mail address is invalid.
alert("Sorry, you entered an invalid e-mail address. Please try again.”) return false
Chapter 12: Handling Forms 219
In Listing 12-1, you see that the isAValidEmail() function accepts a single parameter, called inputValue. (I show you an example of calling this function in Listing 12-2.)
Inside isAValidEmail(), the for loop steps through each character of the input e-mail address, one character at a time, looking for an at symbol (@) and a dot (.). If the interpreter finds both of these characters in the input e-mail address — and if the @ symbol appears before the . — that e-mail address passes the test as valid.
If you want to perform additional checks — for example, a check to ensure that at least one character precedes both the @ and the . or one to ensure that the last three characters are com, org, edu, or net — you can add the additional JavaScript statements to isAValidEmail() to do so. As a developer, the criteria that define a valid pattern are solely up to you. Whether the additional JavaScript statements necessary to catch all conceivable errors are worth the trouble and complexity is your decision, as well. In this example, I figure that the most likely mistake users make is forgetting to type an @ or a period, so the code in Listing 12-1 fits the bill nicely.
Table 12-1 Examining a Few Regular Expression Symbols
Regular Expression Symbol Meaning
/ Beginning of the pattern
Đ» Beginning of a string
\w+ One or more letters, numbers, or underscores
The @ symbol
\w+ One or more letters, numbers, or underscores
(\.\w{3}) A dot followed by three letters, numbers, or underscores
$ Ending of a string
/ Ending of the pattern
Listing 12-2 puts it all together to show how you can use a regular expression to validate an e-mail address in JavaScript. (Note how many fewer lines this e-mail validation script uses than the one I offer in Listing 12-1 earlier in this chapter.)
220 Part IV: Interacting with Users
Listing 12-2: Using a Regular Expression to Validate an E-Mail Address
function validateEmail(input) {
// JavaScript recognizes regular expressions and automatically // designates the variable "emailPattern” as a RegExp object. var emailPattern = /A\w+@\w+(\.\w{3})$/
// test() is a built-in method of the RegExp object. if (emailPattern.test(input)) {
alert("This is a valid e-mail address.”)
else {
alert("Error: this is NOT a valid e-mail address”)
Please enter an e-mail address and click somewhere else on the page: .INPUT TYPE=”text” SIZE=”25” onBlur=”validateEmail(this.value);”>
Regular expressions are fairly complex animals, and I can’t go into all the nitty-gritty details of them here. Fortunately, Microsoft maintains a great primer on regular expressions (and the built-in JScript object RegExp) at
Oh, no! Everything's blurry!
The name for the onBlur event handler relates to the concept of focus. An object is said to receive focus when you click it. So, by default, the object becomes blurry when you click something else, and that object loses focus.
Here's a quick rundown of when the JavaScript interpreter executes a few common blur-related event handlers:
onFocus executes when an element
receives focus (a user tabs to it or clicks it).
clicks somewhere else without changing anything (the element loses focus, or blurs).
onChange executes when an element loses focus and its contents are modified.
onSelect executes when a user selects some or all text (inside a text or textarea element). The behavior of onSelect is similar to onFocus except that onSelect occurs when the element receives focus and the user selects text.
Previous << 1 .. 69 70 71 72 73 74 < 75 > 76 77 78 79 80 81 .. 118 >> Next