I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Regular Expressions


Estimated reading time: 1 minute, 36 seconds

Sometimes information entered into forms must exactly match a string or value: a username and password, for example. In a login form, the characters used must be exactly the same as a known, stored value. Other forms might have a much more general field, such as someone entering their name for the first time, or an eMail address. In those cases, we need to check what the user has entered against a pattern, in a form known as a regular expression.

For example, we might need to confirm that a person’s first name, as entered into the form, contains at least two characters, and that the characters are letters, not numbers or punctuation. Similarly, we should check that an area code entered for a phone number in North America should be three numbers long, and can only start with a limited range of numerals, and that an eMail address contains an @ symbol.

Because they are so handy, most computer languages have some kind of regular expression: HTML5 does so, as do PHP, Perl and JavaScript.

As you can see, regular expressions can get complicated fast (for an extreme example, see the full pattern for validating an eMail address in Perl). As a general rule, finding good patterns is a matter of searching online or looking at reliable sources, rather than trying to build them from scratch, unless you are attempting to validate a very specialized field. Some examples:

Information to validatePattern
First and last name, city/^[[:alpha:].’ -]{2,15}$/
Phone number (area code, North America)/[2-9][0-9]{2}/
Phone number (local, after stripping out non-numerals)/[2-9][0-9]{6}/
eMail address/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,6})$/
Image file extension/\.(jpg|gif|jpeg|png)$/

Note that the pattern given for eMail addresses is good, but not perfect: it still has a few few issues, such as not allowing an IP address for the domain. A better (albeit considerably more complicated) validation solution exists, which should probably be combined with a DNS lookup for a complete test.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.