Easy Cross-Browser Form Validation Using Regular Expressions


		Home \| Community \| Developer's Paradise \| Jobs User Groups \| Site Tools \| Site Information \| Search

Main Menu

Easy Cross-Browser Form Validation Using Regular Expressions

-Easy Cross-Browser Form Validation Using Regular Expressions
-The Regular Expression Object
-Sample Usage
-Demonstration
-Discuss this Article

Categories
Language
JavaScript
Product
IE4, IE5, NS4
Task
Cross-Browser DHTML, Form Enhancement, Utilities
Technology
ECMA-262

Sample Usage

Now that you’ve been introduced to regular expressions and patterns, let’s look at a few examples of common validation and formatting functions.

Valid Phone Number

Assuming the area code and phone are not separate fields, a valid phone number would consist of the area code contained within parentheses, maybe a space, 3 digits, a dash, and 4 more digits. There should be no leading or trailing characters. The first number of the area code may not be a zero. A regular expression to perform that task would look like this:

var objRegExp  = /^\([1-9]\d{2}\)\s?\d{3}\-\d{4}$/;

Valid Date Format

A valid short date should consist of a 2-digit month, date separator, 2-digit day, date separator, and a 4-digit year (e.g. 02/02/2000). It would be nice to allow the user to use any valid date separator character that your backend database supported such as slashes, dashes and periods. You want to be sure the user enters the same date separator character for all occurrences. This can be done with a regular expression like this:

var objRegExp = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/

This example uses backreferencing to insure that the second date separator matches the first one.

Valid Integer

A valid integer value should contain only digits plus possibly a leading minus sign for negative numbers. A regular expression to do that would look like this:

var objRegExp  = /(^-?\d\d*$)/;

Remove Commas

A user may enter a number separated by commas. You may wish to remove the commas before storing the number. A reformatting function to do that would look like this:

function removeCommas( strValue ) {
  var objRegExp = /,/g; //search for commas globally
  //replace all matches with empty strings
  return strValue.replace(objRegExp,'');
}

Demonstration Page

As you can see, complex validation and character replacement tasks can be accomplished quite easily. I have written a library of validation and formatting functions that can be re-used in your applications. This library can be accessed and tested via this demonstration page. This article and sample code can be downloaded from here.

Figure 1. Demonstration Page

Summary

This article presented a brief introduction to regular expressions and showed you how they can be used to simplify cross-browser validation tasks. Regular expressions have a host of other uses and are found in many languages. VBScript 5.0 now incorporates regular expressions as part of its object model. To fully understand and appreciate the power of regular expressions, I recommend that you read further on the subject.