Web Development optimize

Data validation with JavaScript and regular expressions

Discover how regular expressions offer a simple and elegant way to manipulate text within JavaScript. Tony Patton also explores how JavaScript's regular expression simplifies data validation.

Data validation is an essential aspect of any Web application that accepts data from the user. After all, you must ensure the data is formatted as expected before working with it. With Web applications, you can choose to utilize platform-specific features, such as those available with ASP.NET, JSP, and so forth, or you can take advantage of client-side JavaScript. JavaScript's regular expressions simplifies data validation.

Regular expressions

Regular expressions are a type of pattern matching. They allow you to easily describe a pattern in text and are a great tool for validating textual data. In addition to pattern matching, they can be used to replace text. Since I was first introduced to regular expressions when working on a UNIX system via Perl, support for regular expressions has greatly expanded.

One note: If you spend a lot of time around other developers, you may hear regular expressions referred to as RegEx or RegExp. While both are powerful, regular expression syntax is a bit arcane and can take a while to master. Let's take a closer look at the basics of developing regular expressions.

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!

Basic syntax

Regular expression syntax can be complex. There are entire books devoted to the subject, but I will cover a few of the basics to get you started.

A basic feature is anchors, which allow you to specify the start and/or end of a string. The caret (^) is used to indicate the beginning of a string, while the dollar sign ($) indicates the end. You should use an escape sequence if you need to include a caret or dollar sign in a search string. The escape character is a backslash (\), and it precedes the caret or dollar sign. The following sample matches the word search when it appears by itself in a string:

^search$

In addition, you can search for a set of characters, which are enclosed in square brackets, that is [ and ]. A character set is a set of characters to which a matched character must belong. A good example is searching for a number in a range like [12345] to match a number from one to five; it may also be written as [1-5].

Many times you will need to specify that a character may appear multiple times, or it is optional. The question mark (?) means the character preceding it is optional. In addition, the plus sign (+) means one or more of the previous characters may appear and the asterisk (*) means zero or more of the previous character may appear.

Now let's take this brief introduction to regular expression syntax and apply it to JavaScript.

JavaScript support

Regular expression support was added to JavaScript in version 1.2. Browser support began with Internet Explorer 4, Netscape 4, all Firefox versions, and most modern Web browsers include support. It is available via the JavaScript string and RegExp objects.

Working with strings

Every JavaScript string variable includes regular expression support via three methods: match(), replace(), and search(). In addition, the object test() method allows you to test. Here's more information about match(), replace(), and search():

  • match(): Used to match a regular expression against a string. If one or more matches are made, an array is returned that contains all of the matches. Each entry in the array is a copy of a string that contains a match. If no match is made, a null is returned.
  • replace(): Used to match a regular expression against a string and replace any match with a new substring. The first parameter is the regular expression, and the second parameter is the replace string.
  • search(): Used to search for a match between a regular expression and the specified string. If a match is found, the search method returns the index of the regular expression within the string. If no match is found, a value of -1 is returned.

JavaScript provides the RegExp object for creating and working with regular expressions.

RegExp

The RegExp object contains the pattern of a regular expression. It matches strings using its methods and properties. There are two ways to create an instance of a RegExp object: by using the constructor function, or with a literal text format with the text pattern of the regular expression specified in both cases. It contains an optional second parameter that signals if the search is global (g), ignore case (i), or globally ignore care (gi). This is a simple example of creating a RegExp object using the constructor approach to search for a string while ignoring case:

testRegExp = new RegExp("^search$","I")

You can create the same instance using the literal text format (enclosed in forward slashes):

testRegExp = /^search$/i

The RegExp object contains numerous methods, but we'll cover one in the test method. It tests for a match of a regular expression in a string, returning true if successful and false if not. The test method can be used with either a string literal or a string variable. Basically, it allows you to apply a regular expression against a string value. The following sample provides an example as it signals if the string matches the expression:

testRegExp = /search/i;
if (testRegExp.test("this is a search string") {
document.write("The string was found.");
} else {
document.write("No match found.");
}

We can place it in a Web page to test:

<html><head>
<title>RegExp test</title>
</head><body>
<script language="javascript">
testRegExp = /search/i;
if (testRegExp.test("this is a search string")) {
alert("The string was found.");
} else {
alert("No match found.");
}
</script></body></html>

In action

It is time for a more complete example. The Web page in Listing A includes a JavaScript function (validate) to work with values entered via text fields on the page. The JavaScript searches for a string containing my last name with one of two versions of my first name (case is ignored). If the name is found, the text is replaced by a shortened version of my name via the string object's replace method. The second text field is used to accept time values, and a regular expression is used to verify a valid time value is entered (two set of numbers separated by a colon). The simple use of regular expression pattern matching (and replacing) in the example provides a sampling of how to utilize it in your code to provide client-side form validation.

Powerful and complex

Regular expressions are powerful and somewhat complex; therefore, the learning curve may be a bit steep, but it is well worth your time to learn how to properly use them. Regular expressions provide a simple and somewhat elegant way to manipulate text within JavaScript (and other languages) with a common application in form validation.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments