Form Validation with Regular Expressions

CSE 190 M (Web Programming), Spring 2008

University of Washington

References: JavaScriptKit, w3schools

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.1 Valid CSS!

What is form validation?

A real form that uses validation

wamu

Client vs. server-side validation

Validation can be performed:

An example form to be validated

<form id="exampleform" action="http://foo.com/foo.php" method="get">
	<fieldset>
		City:  <input id="city" type="text" name="city" /> <br />
		State: <input id="state" type="text" name="state" size="2" /> <br />
		<input type="submit" />
	</fieldset>
</form>
City:
State:

Server-side validation code

$city = $_REQUEST["city"];
$state = $_REQUEST["state"];
if ($city == "" || strlen($state) != 2) {
?>

			<h2>Error, invalid city/state submitted.</h2>

<?php
}

Client-side validation code

<form id="exampleform" action="http://foo.com/foo.php" method="get">

window.onload = function() {
	$("exampleform").onsubmit = checkData;
};

function checkData(event) {
	if ($("city").value == "" || $("state").value.length != 2) {
		Event.stop(event);
		alert("Error, invalid city/state.");  // show error message 
	}
}

Validation can be a pain!

Regular expressions

Using regular expressions to validate forms

What is a regular expression?

/^[\w\.%\-]+@[\w.\-]+\.[a-zA-Z]{2,4}$/

Basic regular expressions

/abc/

Wildcards: .

Special characters: |, (), ^, \

Quantifiers: *, +, ?

More quantifiers: {min,max}

Character sets: []

Character ranges: [start-end]

Escape sequences

Programming with regular expressions

How various web languages support regexes

Regular expressions in PHP (PDF)

Regular expression example

# replace vowels with stars
$str = "the quick    brown        fox";
$str = preg_replace("/[aeiou]/", "*", $str);
                         # "th* q**ck    br*wn        f*x"

# break apart into words
$words = preg_split("/[ ]+/", $str);
                         # ("th*", "q**ck", "br*wn", "f*x")

# capitalize words that had 2+ consecutive vowels
for ($i = 0; $i < count($words); $i++) {
	if (preg_match("/\\*{2,}/", $words[$i])) {
		$words[$i] = strtoupper($words[$i]);
	}
}                        # ("th*", "Q**CK", "br*wn", "f*x")

PHP form validation w/ regexes

$state = $_REQUEST["state"];
if (!preg_match("/[A-Z]{2}/", $state)) {
?>

			<h2>Error, invalid state submitted.</h2>

<?php
}

Regular expressions in JavaScript

Replacing text with regular expressions

  • string.replace(regex, "text")
    • replaces the first occurrence of given pattern with the given text
    • var str = "Marty Stepp";
      str.replace(/[a-z]/, "x") returns "Mxrty Stepp"
    • returns the modified string as its result; must be stored
      str = str.replace(/[a-z]/, "x")
  • a g can be placed after the regex for a global match (replace all occurrences)
    • str.replace(/[a-z]/g, "x") returns "Mxxxx Sxxxx"
  • using a regex as a filter
    • str = str.replace(/[^A-Z]+/g, "") turns str into "MS"

Debugging/testing regular expressions

  • open Firebug's Console tab and type in short regex code to see whether it works
    Error Console
  • TextPad's Find and Replace dialogs allow regular expressions
    TextPad