JavaScript Regular Expression - Validating street address, city, zip and phone number

[sikuneh]

I am not very good with regular expressions, and for a school project I need to validate street address, city, zip and phone number fields in a form using JavaScript. I don't know where to start with regular expressions. I just need the basic validation: not empty (which I can do myself) and proper format.

Here is the base form fields.

<table border="0" width="100%">
    <tr>
        <td>First Name</td>
        <td><input type="text" name="fname" /></td>
    </tr>
    <tr>
        <td>Last Name</td>
        <td><input type="text" name="lname" /></td>
    </tr>
    <tr>
        <td>Address</td>
        <td><input type="text" name="address" /></td>
    </tr>
    <tr>
        <td>City, state, ZIP</td>
        <td><input type="text" style="width:200px;" name="city" /> <input type="text" style="width:50px;" name="state" /> <input type="text" style="width:75px;" name="ZIP" /></td>
    </tr>
    <tr>
        <td>Phone</td>
        <td><input type="text" name="phone" /></td>
    </tr>
</table>

 

[misson]

Re: JavaScript Regular Expression - Validating street address, city, zip and phone nu

If you don't know where to start, it's an issue with the lesson or study material, so it's best to talk with your teacher or TA.

You haven't specified what the formats are for the fields, so it's rather hard to give hints, but I expect all you need to understand are some of the basics of regular expressions for this assignment: (non-capturing) grouping, repetition (technically known as the Kleene star), alternation/character classes. These (along with concatenation) are the features of formal regular languages and regular expressions, which aren't as powerful as regular expression as implemented in various languages & libraries (usually called "regexes" to distinguish them from formal regular expressions), but are much simpler to understand. Since regexes generally don't have to match the whole string to succeed, you may also need anchors (regular expressions must match an entire string, so anchors are unnecessary). Capturing-grouping is the main feature that makes regexes more powerful than regular expressions, but I doubt you'll need that for this assignment. Other syntax, such as the match-any-character atom (dot), optional quantifier (question-mark), "{n,m}" quantifier and special atoms (\b, \w, \d &c.), may be useful but unnecessary (they're all just syntactic sugar).

The other hint I can give is there are two ways to use regexes for validation: to allow valid data and disallow invalid data. Sometimes it's easier to write a regex for one over the other. For example, the regex to match an invalid character is (slightly) shorter than one to match all valid characters (in Perl, because Perl is the regex language king):

# check if data is all valid characters
if ($ !~ /^[-.?!,;:() A-Za-z0-9]*$/) {
    ...
}
# check if data has an invalid character
if ($ =~ /[^-.?!,;:() A-Za-z0-9]/) {
    ...
}

The difference isn't too significant in this example, but in other cases one way will be much easier to write. For formal regular expressions, the approaches are equivalent since regular languages are closed under complement (the complement of a regular expression/language is also regular: for any regular expression, there's another regular expression that matches precisely those strings that the first doesn't match, and vice-versa).

As for validation, an issue to consider (and perhaps to bring up in class) is that forcing people to adhere to a specific data format can be frustrating. In other words, it's bad for usability. For something like phone numbers, it's more usable and fairly easy to accept any format and convert it to the appropriate one (which can also use regexes). You can do this on the page (e.g. inserting "/" automatically for dates) in addition to server-side processing, a technique called "input masking". Of course, this is just an exercise, but make sure you're learning the right thing (how to write regexes) rather than the wrong thing (only using validation).