I made my first venture in regular expressions, when I had to create a JavaScript that checked the validity of an e-mail address. By checking it’s validity, I mean that I wanted to make sure that users submitted an address that followed your_name@domain.com and not simply entered a whole bunch of garbage. The best way to do this is to match a pattern or as it is known use regular expressions. Before we set off here is the script that we are going to work through:

<script language=”JavaScript” type=”text/javascript”>
<!–
function validate() {
   var pat_email = /^[-._&0-9a-zA-Z]+[@][-._&0-9a-zA-Z]+[.][._0-9a-zA-Z]+[a-zA-Z]$/;
   with (document.form1) {
      //validate email
      if ( pat_email.exec(txt_email.value) == null ) {
         alert(“You have not entered a valid email address.”);
         txt_email.focus();
         return false;
      }
   }
}
//–>
</script>

OK let’s see what is going on here. First we define the pattern that we are trying to match. There we specify the characters that are accepted and the characters that need to appear in it to determine it’s validity. JavaScript knows you are defining a regular expression when you use the statement var <pattern_name> = /<pattern_goes_here>$/;. If you take a look at the pattern you will notice [] (I will get to the caret in a second). These are used to group patterns together and in some cases create sub-patterns. Taking a step back you can see that we are trying to match pattern that follows these guidelines []@[].[], which is how most e-mail addresses are composed. In between the square brackets I have specified the characters that are permitted for each sub-pattern. So looking at the first set of square brackets, only values between 0-9, a-z, A-Z, ”-”, “_”, “&” and ”.” are accepted. How does the script know that these are to be accepted? This is where we get back to the caret (^). This symbol inside the forward slashes indicates that it should accept only those characters specified. Move the caret outside of the slashes and you get achieve the opposite, accept any characters other than the one listed above. You may also wonder what the +[a-zA-Z] is about. We included this in order to accept domains names such as .co.uk or .com.au, hence the reason for only including letters and not numbers.

As an aside should you wish to learn more about regular expressions or pattern matching I can recommend two books. The first is what I used and it gave me an introduction to regular expressions and is the JavaScript developers bible: JavaScript from O’Reilly & Associates, Inc. The other is Perl Programming also from O’Reilly & Associates, Inc. You may be wondering why recommend a Perl book for JavaScript regular expressions. As it happens Perl forms the basis for the way in which JavaScript handles regular expressions.

Right on with the script. Once we have defined our pattern we have to match it up with something. This happens in the following line, where we inform the script to match it to form1 in our current page. Next we set the condition, where if pat_email is matched up against text_email (this is the form field we are validating) and if this returns null, then we have no match and hence the user has entered an e-mail address that does not satisfy our criteria. If this is the case an alert should be made, the focus set back to aforementioned form field and the form submission aborted.

And there you go that’s the script. You invoke the script by including onsubmit=”return validate();” in your <FORM> tag. As ever I hope this proved to be useful and informative. Comments and feedback always welcome!!!