CXO

Check for a pattern

You can use JavaScript to determine if a text value conforms to a predefined pattern, such as an account number. Here's how.

By Emily A. Vander Veer

Now we get even fancier. You can use JavaScript to determine if a text value conforms to a predefined pattern such as an email address, a social security number, a date, or an account number. We'll create an example that determines if a value looks like a valid phone number, but you can use a similar approach regardless of the pattern you want to enforce.

Let's define our new function, isAPhoneNumber():

function isAPhoneNumber(entry) {
  //don't bother validating the pattern if
  //no value was passed in
  if (entry) {
    //parse the value into small subsections
    var openParen = entry.substring(0,1);
    var areaCode = entry.substring(1,4);
    var closeParen = entry.substring(4,5);
    var exchange = entry.substring(5,8);
    var dash = entry.substring(8,9);
    var line = entry.substring(9,13);

This big chunk of code is easy to understand if you break it down. First, if (entry) checks whether an entry exists. If one does, the code breaks out, or parses, the entry into separate pieces using the JavaScript substring() method.

The substring() method is powerful, but it isn't exactly intuitive. The method returns the portion of a string (the data entered by the user) beginning with the first parameter you give it and ending one digit before the last parameter you give it. And just as in C, JavaScript considers the first digit the 0th element. So, for instance, if your entry reads "(123)456-7890," entry.substring(0,1) returns just the first character, which is "("; entry.substring(1,4) returns "123"; entry.substring(4,5) returns ")"; and so on.

Once we've parsed the data into the proper pieces, we can check them against our pattern:

    //now check each of the subsections
    //individually
    if ((openParen != "(")
      || (!isANumber(areaCode,
"phone number - area code"))
      || (closeParen != ")")
      || (!isANumber(exchange,
"phone number - exchange"))
      || (dash != "-")
      || (!isANumber(line,
"phone number - line"))) {
        alert("Please enter phone number
          in the following format: (123)456-7890");
  }
  }
}

The second if statement checks each of the pieces, and if just one piece doesn't conform to what's expected, the whole phone number is deemed invalid. In English, the code above translates to this statement: "if openParen doesn't look like ( or the areaCode isn't numeric or closeParen doesn't look like ) or the exchange portion of the phone number isn't numeric or the hyphen doesn't look like - or the line portion of the phone number isn't numeric, ask the user to reenter the phone number."

By parsing the pattern into different pieces, we can test each piece separately. This tells the user exactly which part of the value caused the problem. Breaking things apart also makes it easier to code: notice that the same isANumber() function is called for each of the numeric pieces of the pattern.

Emily A. Vander Veer is the author of numerous Internet-related magazine articles and books, including JavaScript for Dummies, JavaScript for Dummies Quick Reference, and JavaBeans for Dummies, all published by IDG Books.

Editor's Picks