Client side Regular Expression Validation
Recently Brian Johnson posted something that made me think. There are hundreds and probably thousands of web developers out there who have never used regular expressions and even if the knew about them they don’t know HOW to implement them. Regular expressions are really awesome once you start using them. They are exceptionally powerful although they look really difficult in the beginning. For the beginners I suggest that you visit a site like http://www.regular-expressions.info/ as they have many many examples and a very good tutorial. Once you have some idea of whats cooking then bookmark http://regexlib.com/CheatSheet.aspx. Between these two sites you’ll be writing your own regular expressions in no time. But then again, why re-invent the wheel? Visit http://regexlib.net/ for a whole range regular expressions!
So what is a regular expression? It is a set of rules that a certain set of text must adhere to. For example, if we want to test whether a user has entered a valid Johannesburg or a Pretoria telephone number. Most developers first test whether the number contains 011 or 012 as the area code. Then if that was successful test whether the user entered 7 other digits. This would usually comprise of a few “if” statements and hopelessly too much code. Whereas with a regular expression if can be done with 1 line of code.
I am going to write this example using only Javascript and tomorrow I will post an entry using ASP.Net.
<script type=’text/javascript’>function ValidateNumber()
{
//Declare regular expression
var re = new RegExp(’^(\()?(011|012)(\)|-)?([0-9]{3})?([0-9]{4}|[0-9]{4})$’);
if (window.document.getElementById(’txtTelephoneNumber’).value.match(re))
{
alert(”Valid telephone Number”);
}
else
{
alert(”Telephone Number not valid”);
}
}
</script>
and thats it! One line and it checks whether the entered number is in the following format: 0128134456 or 0118176543. Isn’t that so much easier? You can use regualr expressions to check the validity of telelphone numbers, email addresses, URI’s, date/times and anything else. Creating your own complex regular expression’s may take a while to master but it’ll save countless hours of redudant coding.
Here’s the full code for a quick test page. Just paste it in notepad and save the file as a .html file and open with Internet Explorer.
<html>
<head>
<script type=’text/javascript’>
function ValidateNumber()
{
//Declare regular expression
var telRegEx = new RegExp(’^(\()?(011|012)(\)|-)?([0-9]{3})?([0-9]{4}|[0-9]{4})$’);
//Match textbox value to Regular Expression
//Match method returns a boolean value
if (window.document.getElementById(’txtTelephoneNumber’).value.match(telRegEx))
{
alert(”Valid telephone Number”);
}
else
{
alert(”Telephone Number not valid”);
}
}
</script>
<head>
<body>
<span>Enter a telephone number: </span><input type=’text’ id=’txtTelephoneNumber’ /><br /><br />
<input type=’button’ onclick=”ValidateNumber();” value=”Test Number” />
</body>
</html>
I firmly believe that any web developer should be using regular expressions for client side input validation. It’ll save you time and improve your application’s performace since you won’t need to do your validations client side. This is something that is exceptionally easy and easy to implement. The .Net implementation is even easier but I’ll post that tomorrow tonight!
You can read Brian’s post about Regular Expressions here: Do Regular Expressions scare developers?