Checking Email
Web sites often use email addresses as usernames because they
are guaranteed to be unique, as long as they are valid. In addition, the
organizations can use the email addresses to communicate with their users later.
You do not have to initiate a server round trip just to validate an email
address, however. This task can be initiated in the client, which cancels the
submission of the username to the server if the email syntax is invalid.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="js/http_request.js"></script>
<script type="text/javascript" src="js/email.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Enter email</title>
</head>
<body>
<form action="javascript:void%200">
<div id="message"></div>
Enter email: <input type="text" name="email" size="25">
<br />
<button type="submit" name="submit" value="Send">Send</button>
</form>
</body>
</html>
This function creates a new Email object, validates the user's email
address,
and, if it's valid, submits it to a server component.
Let's take a closer look at the checkAddress( )
function:
function checkAddress(val){
var eml = new Email(val);
var url;
eml.validate( );
if (! eml.valid) {eMsg(eml.message,"red")};
if(eml.valid)
{
url="http://www.parkerriver.com/s/checker?email="+
encodeURIComponent(val);
httpRequest("GET",url,true,handleResponse);
}
}
var user,domain, regex, _match;
window.onload=function( ){
document.forms[0].onsubmit=function( ) {
checkAddress(this.email.value);
return false;
};
};
/* Define an Email constructor */
function Email(e){
this.emailAddr=e;
this.message="";
this.valid=false;
}
function validate( ){
//do a basic check for null, zero-length string, ".", "@",
//and the absence of spaces
if (this.emailAddr == null || this.emailAddr.length == 0 ||
this.emailAddr.indexOf(".") == -1 ||
this.emailAddr.indexOf("@") == -1 ||
this.emailAddr.indexOf(" ") != -1){
this.message="Make sure the email address does " +
"not contain any spaces "+
"and is otherwise valid (e.g., contains the \\"commercial at\\" @ sign).";
this.valid=false;
return;
}
/* The local part cannot begin or end with a "."
Regular expression specifies: the group of characters before the @
symbol must be made up of at least two word characters, followed by zero
or one period char, followed by at least 2 word characters. */
regex=/(^\\w{2,}\\.?\\w{2,})@/;
_match = regex.exec(this.emailAddr);
if ( _match){
user=RegExp.$1;
//alert("user: "+user);
} else {
this.message="Make sure the user name is more than two characters, "+
"does not begin or end with a period (.), or is not otherwise "+
"invalid!";
this.valid=false;
return;
}
//get the domain after the @ char
//first take care of domain literals like @[19.25.0.1], however rare
regex=/@(\\[\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}.\\d{1,3}\\])$/;
_match = regex.exec(this.emailAddr);
if( _match){
domain=RegExp.$1;
this.valid=true;
} else {
/* The @ character followed by at least two chars that are not a period (.),
followed by a period, followed by zero or one instances of two or more
characters ending with a period, followed by two-three chars that are
not periods */
regex=/@(\\w{2,}\\.(\\w{2,}\\.)?[a-zA-Z]{2,3})$/;
_match = regex.exec(this.emailAddr);
if( _match){
domain=RegExp.$1;
//alert("domain: "+domain);
} else {
this.message="The domain portion of the email had less than 2
chars "+
"or was otherwise invalid!";
this.valid=false;
return;
}
}//end domain check
this.valid=true;
}
//make validate( ) an instance method of the Email object
Email.prototype.validate=validate;
function eMsg(msg,sColor){
var div = document.getElementById("message");
div.style.color=sColor;
div.style.fontSize="0.9em";
//remove old messages
if(div.hasChildNodes( )){
div.removeChild(div.firstChild);
}
div.appendChild(document.createTextNode(msg));
}
//a pull-it-all-together function
function checkAddress(val){
var eml = new Email(val);
var url;
eml.validate( );
if (! eml.valid) {eMsg(eml.message,"red")};
if(eml.valid)
{
//www.parkerriver.com
url="http://www.parkerriver.com/s/checker?email="+
encodeURIComponent(val);
httpRequest("GET",url,true,handleResponse);
}
}
//event handler for XMLHttpRequest
//see Hack #24
function handleResponse( ){
//snipped...
}
First, the code sets up the handling for the user's click on
the Send button. window.onload
specifies an event handler that is called when the browser completes the loading
of the web page:
window.onload=function( ){
document.forms[0].onsubmit=function( ) {
checkAddress(this.email.value);
return false;
};
};
