Email Validation

One of the important things about user input is to verify that the user has supplied the data that you have requested. If you request an email address, you can make a script that checks to see if the email field is empty, but that does not mean that the user entered a valid email address. If the user enters I_don't_have_one, into the email field, then it would return a true statement, since the field is not blank. By using a regular expression, we can verify that what the user has inputted contains what we are looking for. In this case, we want to make for sure the field has an at symbol (@) and the domain is either a .com, .edu, .net, .mil, or .co.uk.

<script language="JavaScript" type="text/javascript">
function emailCheck(email){
 var reg =/^[a-z_0-9]+@+[a-z_0-9]+(.com|.edu|.net|.mil|.co.uk)$/
  if (reg.test(email)) { 
   document.getElementById("check").innerHTML = "<img src='images/check.gif'>"
  }else{
   document.getElementById("check").innerHTML = "<img src='images/uncheck.gif'>"
  }
}
</script>
<input type="text" id="email" onkeyup="emailCheck(this.value)"> 
<span id="check">
 <script>	
  emailCheck()
 </script>
</span>

The first thing we do in the Javascript is create a function that we will be using to check the email address that the user inputs in the form. We then create a variable with the regular expression that we want to check for. There are some rules for regular expressions. We will not cover all here, but we will cover the ones that we use. To start a regular expression we have to use to slashes (/). This tells the browser that anything between them is the expression that we are searching for. In our expression we want to start at the beginning of the string. To do this we are going to use the caret symbol (^). Next, in our regular expression, we see a-z_0-9 in brackets. This says that we only want alphanumeric characters at this point. We do this because email addresses should not contain non alphanumeric characters. Then we use the plus sign (+) to say we want to make for sure that the at symbol is next. Following this we want to check to make for sure that the user puts in a valid domain, so we check to make for sure all of the characters that were supplied are alphanumeric. The last part of our expression is what we are looking for s either .com, .edu, .net, .mil, or .co.uk, then the input is valid. By using the pipe symbol, we are searching for any of these five expressions. If we wanted to add an additional domain, we can by adding another | and the domain that we want to add. Since we want this to be the end of our expression we use the dollar sign ($). That way if the user inputs test@test.com2, the browser knows that the string is invalid. The if else statement, displays one of two images. It displays a red X if the email field does not have a valid email address, and a green check mark if it does.
The HTML just a basic input box, but by using the JavaScript even onkeyup, we have it run the JavaScript function. We then have a span id that displays the image that we are wanting to display based on rather the email address is valid or not. You can test the script below.