One overlooked feature of JScript is the regular expression interpreter, which makes string pattern matching easy.

One of the new and exciting features of Microsoft® JScript® version 3.0 that receives very little attention is the regular expression object. If you know Perl, you’re already familiar with these very powerful and simple objects, designed to make pattern matching easy. Let’s see how to implement them in JScript.       Input validation is one of the most common requirements in Web site development. At design time, you don’t know what exact values viewers will enter, but you do know the format they should be in. A regular expression is a way of representing a pattern you are looking for in a string (see Figure 1). For example, let’s say I want users to input 6 digits followed by a decimal and 4 more digits. In a regular expressions \d represents any digit. A simple regular expression for my desired input would be: /\d\d\d\d\d\d\.\d\d\d\d/ Notice the slashes surrounding the expression. This is the proper way to indicate a regular expression pattern, and its assignment to a variable in JScript creates a regular expression object (see Figure 2 and Figure 3). Also notice the backslash before the decimal; this has a special meaning in the context of a regular expression. The characters . ? + * - ( ) [ ] {} $ ^ | / and \ all have special meaning in regular expressions. To use one of these special characters as a match character in a regular expression, you must precede it with a backslash.       You can specify the number of times you expect something to appear by specifying a number in curly brackets. The pattern shown previously can be simplified like this: /\d{6}\.\d{4}/       To create a regular expression object in JScript, you just assign a slash-delimited, unquoted pattern to a variable like this: template = /\d{6}\.\d{4}/       To test to see if that pattern matches a particular string value, you can use the test method of the object, which returns true if there is a match or false if not. The code to validate the number you’ve been looking at would look like this:

 template = /\d{6}\.\d{4}/
 
 function validate(instr)
 {
     
     if (!template.test(instr))
     {  // Not True - so no match was found
 
     alert ( "please use the format :\n\n123456.1234" )
     }
 }

Varying Patterns
      Now, let’s say that you know there will be between 4 and 6 digits before the decimal and at least 2 after it. That regular expression would look like this:

 /\d{4,6}\.\d{2,}/

 /\d{6}\.\d{2}|\d{2}\.\d{6}/

 /[13-5]\d{6}\.\d{2}/

 /[^13-5]\d{5}\.\d{2}/

Fond Memories
      One of the best features of regular expressions is that they can remember which parts of the expression were matched. You can surround the parts of the regular expression you want to access later with (). Suppose you want to retrieve the values on the left and right sides of the decimal after test parses a string. That pattern would look like this:

 /(\d{4,6})\.(\d{2,})/

 RegExp.$1
 RegExp.$2

 /(\d{3})-\d{3}-\1/

Changing Patterns on the Fly
      There is another way to create regular expression objects that can be particularly useful if you want to validate many different input values.

 template = new RegExp("pattern",["options"])

 function validate(inobj,pattern)
 {
 template = new RegExp( pattern )
 
     if (! template.test(inobj.value))
     {
         // Failed
         inobj.focus()
         alert ( "Pattern used : " + template.source)
     }
 }

 <input type=button
  onclick="validate(tbox,'^[a-z\.]+)@([a-z\.]+)$')"
  value="show me">

A Useful Little Tool
      Now let’s build a useful generic validation routine, using a quick order window as a sample. The quick order popup window will allow a viewer to enter their account number, the part number they want, and a contact

Figure 5: Order Popup
Example Online!

email or telephone number (see Figure 5). The code is shown in Figure 6, and is available in the code archive at the top of this article if you want to test it yourself.
      The previous validate routine is a good start. What it is missing are appropriate error messages and the facility for using the options parameter for the regexp. It would be easy to do this using arrays, but I’m in the mood for a little object orientation. The VO function shows the constructor. For each field to validate, you hand this constructor the pattern, error message, and the regular expression parameters you want to use for that field. Save the resulting object in the ValObjs array with the same name you’ve given the edit field in the form. Notice that in the email field validation, I use the ignore case option for the regular expression.
      I have created two functions. The first, validate_field, just checks to see that the field value matches the corresponding pattern by passing the name of the field to the function; validate_form loops through all the items in the ValObjs array to be sure that all items there have valid values in their corresponding fields. It stops when an error has been found, so the user has the chance to correct it (see Figure 7). By separating the steps this way, I can choose to validate some fields in their onchange events, and also do a complete check on submission of the form. For testing purposes, I have only put in an alert box, confirming the form input is valid, in the place of executing the form action.

Figure 7: Alert Box

       This quick order code is easy to modify for ASP pages if you know your site needs to cater to multiple browsers. Instead of stopping the form validation function after the first error, continue through the loop, printing all the error messages, and change the field validation routine so that it looks at the request object rather than the form object.

Conclusion
      Although it looks a little complicated at first, the regular expressions in Microsoft JScript 3.0 are actually very easy to use, and they make data validation a breeze. Once you recognize the power of these neglected objects, they will gain a favored position in your repertoire. JScript 3.0 is included in Internet Explorer 4.0 and higher, comes with Internet Information Server 4.0 or better, and is available as an upgrade to older versions of Internet Explorer from the Microsoft Scripting Web site http://msdn.microsoft.com/scripting.

Also see the sidebar: What About VBScript?

From the October 1998 issue of Microsoft Interactive Developer.