Home » , » Validate Email address

Validate Email address

00:02

 

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;
    };
};
Categories: ,