Lecture 20 - Validation and Regular Expressions

Agenda

Wrapping up Module 4 material

CP4 is due tonight, HW4 is out!

Returning to input validation: client-side vs. server-side validation

Which motivates... Regex!

User Input Validation

User input validation is the process of ensuring that any user input is well-formed and correct (valid).

Q: What are some examples of input validation you've seen on the web?

Preventing blank values (e-mail address)
Ensuring the type of values (e.g. integer, real number, currency, phone number, Social Security Number, postal address, email address, data, credit card number, ...)
Ensuring the format and range of values (ZIP code must be a 5-digit integer)
Ensuring that values fit together (user types email twice, and the two must match)

A Real-World Example Form that Uses Validation

Validation Form Example

Client vs. Server-Side Validation

Validation can be performed:

Client-side (before any user input is submitted to a server)
- Can lead to a better user experience, allows for real-time feedback for invalid input. But shouldn't be used for user verification
- We've seen this briefly in Lecture 11!
Server-side (in PHP code, after user input is sent to the server)
- Needed for truly secure validation, but slower
- Should not skip this step under assumption that client-side validation was enough (why can't we trust all requests from a client?)
Both:
- Best mix of convenience and security, but requires most effort to program

Importance of Validation in Web Development

Prioritizing validation is important as web developers so that the websites we build are:

User-friendly
Secure*

If you're interested in learning more, MDN has a good quick introduction to web security, and OWASP is a fantastic resource for all things related to web security. You can also find a good article on how to write user-friendly form UIs here.

The takeaway? There are many ways to perform validation, but MDN/OWASP both are great resources to refer to based on the context of your websites

Most importantly, don't trust that users will provide correct/safe input!

Recall: HTML5 Input Validation (Lecture 11)

We've already seen some ways to use HTML5 tags to require certain types of input by adding attributes to your <input> tags to help with validation

<input type="number">

HTML

We can limit the up and down arrows with min (and max if we choose)

<input type="number" min=0>

HTML

To insist that there is a value in the input field we can add required

<input type="number" required>

HTML

To prevent a user from being able to type in erroneous values, we can add a regular expression to the required attribute

<input type="number" required="\d+">

HTML

An Example of User Input Validation

<form>
  City: <input name="city" type="text"/ >
  State: <input name="state" type="text" />
  ZIP: <input name="zip" type="number" />
  <button id="submit-btn">Submit!</button>
</form>

HTML

output

We can validate this input in a few different ways:

Client-side: HTML5 form elements and input tag attributes
Client-side: JS before sending this form data to the server (e.g. a PHP web service)
Server-side: PHP!

Basic HTML5 Validation with `form`

<form>
  City: <input name="city" type="text" required/>
  State: <input name="state" type="text" size="2" maxlength="2" required/>
  ZIP: <input name="zip" type="number" size="5" min=10000 max=99999 required/>
  <button id="submit-btn">Submit!</button>
</form>

HTML

Forms are HTML elements that can be used to "package" user input values, often used with POST requests. They have historically been misused, but refer to MDN for best practices if you ever use them!

Example

Basic Server-Side Validation

$city = $_POST["city"];
$state = $_POST["state"];
$zip = $_POST["zip"];
if (!$city || strlen($state) != 2 || strlen($zip) != 5) {
  header("HTTP/1.1 400 Invalid Request");
  echo "Error, invalid city/state/zip submitted.";
}

PHP

Basic idea: When recieving a GET/POST request, examine parameter values, and if they are bad, show an error message and abort. But there are some limitations of input validation given what we've learned so far in this course.

How do you test for integers vs. real numbers vs. strings?
How do you test for a valid credit card number?
How do you test that a person's name has a middle initial?
(How do you test whether a given string matches a particular complex format?)

Regular Expressions!

/^[a-zA-Z_\-]+@(([a-zA-Z_\-])+\.)+[a-zA-Z]{2,4}$/

Regular expression ("regex"): a description of a pattern of text

Can test whether a string matches the expression's pattern
Can use a regex to search/replace characters in a string

Regular expressions are extremely power but tough to read (the above regular expression matches email addresses)

Regular expressions occur in many places:

Java: Scanner, String's split method (CSE 143 random grammar generator)
Supported by HTML5, JS, PHP, and other languages
Many text editors (TextPad, Sublime, Vim, etc.) allow regexes in search/replace
The site Rubular is useful for testing a regex

Basic Regular Expressions

/abc/

In PHP, regexes are strings that begin and end with /

The simplest regexes simply match a particular substring

The above regular expression matches any string containing "abc"

Match: "abc", "abcdef", "defabc", ".=.abc.=.", ...
Don't Match: "fedcba", "ab c", "PHP", ...

Wildcards: `.`

A . matches any character except a \n line break

/.ow.l./ matches "Mowgli", "Powell", etc.

A trailing i at the end of a regex (after the closing /) signifies a case-insensitive match

/cal/i matches "Pascal", "California", "GCal", etc.

Special Characters: `|`, `()`, `\`

| means OR

/abc|def|g/ matches "abc", "def", or "g"

() are for grouping

/iP(ad|hone)/ matches "iPad" or "iPhone"

\ starts an escape sequence

Many characters must be escaped to match them literally: /\$.[]()^*+?
/<br \/>/ matches lines containing <br /> tags

Quantifiers: `*`, `+`, `?`

* means 0 or more occurrences

/abc*/ matches "ab", "abc", "abcc", "abccc", ...
/a(bc)*/ matches "a", "abc", "abcbc", "abcbcbc", ...
/a.*a/ matches "aa", "aba", "a8qa", "a!?xyz__9a", ...

+ means 1 or more occurrences

/Hi!+ there/ matches "Hi! there", "Hi!!! there!", ...
/a(bc)+/ matches "abc", "abcbc", "abcbcbc", ...

? means 0 or 1 occurrences

/a(bc)?/ matches only "a" or "abc"

More Quantifiers: `{min, max}`

{min, max} means between min and max occurrences (inclusive)

/a(bc){2,4}/ matches "abcbc", "abcbcbc", or "abcbcbcbc"

min or max may be omitted to specify any number

{2,} means 2 or more
{,6} means up to 6
{3} means exactly 3

Practice Exercise

When you search Google, it shows the number of pages of results as the number of "o"s in the word "Google".

What regex matches such words with an even number of 'o's ("Google", "Goooogle", "Goooooogle", ...?

Your regex should not match strings with fewer than two o's and shold be case-sensitive (only the first letter should be capitalized) (try it)

Solution: G(oo)+gle or Go{2}+gle both work!

Anchors: `^` and `$`

^ represents the beginning of the string or line; $ represents the end

/Doggy/ matches all strings that contain Doggy
/^Doggy/ matches all strings that start with Doggy
/Doggy$/ matches all strings that end with Doggy
/^Doggy$/ matches the exact string "Doggy" only
/^Mo.*Doggy$/ matches "MoDoggy", "Mowgli Doggy", "Mowgli is my Doggy", ... but not "Doggy Mowgli is my Doggy", "Mowgli" or "my Doggy"

(on the other slides, when we say, /PATTERN/ matches "text", we really mean that it matches any string that contains the text)

Character Sets: `[]`

[] groups characters into a character set; will match any single character from the set

/[bcd]art/ matches strings containg "bart", "cart", and "dart"
equivalent to /(b|c|d)art/ but shorter

Inside [], many of the modifier keys act as normal characters

/what[!*?]*/ matches "what", "what!", "what?**!", "what??!", etc.

Practice: What regex matches strings containing a lowercase vowel? (try it!)

Practice: What regex matches strings containing consecutive vowels? (try it!)

Character ranges: `[start-end]`

Inside a character set, specify a range of characters with -

/[a-z]/ matches any lowercase letter
/[a-zA-Z0-9]/ matches any lowercase or uppercase letter or digit

An initial ^ inside a character set negates it

/[^abcd]/ matches any character other than a, b, c, or d

Inside a character set, - must be escaped to be matched

/[+\-]?[0-9]+/ matches an optional + or -, followed by at least one digit

Practice: What regular expression matches UW Student ID numbers? (non-negative 7 digit numbers) (try it!)

Practice: What regular expression matches camelCasing? (match only trings with at least one capital letter; only alphabetical characters are allowed) (try it!)

Practice: What regular expression matches a sequence of only consonants (non-vowel letters) assuming that the string consists only of lowercase letters? (try it!)

Escape Sequences

Special escape sequence characters sets

\d matches any digit (same as [0-9]); \D any non-digit ([^0-9])
\w matches any word characters (same as [a-zA-Z0-9]); \W any non-word character
\s matches any whitespace character ( , \t, \n, etc.); \S any non-whitespace character

Practice: What regular expression matches any string that contains a tab (\t) character?

Practice: What regular expression matches names in a "Last, First M." format, with any number of spaces?

Useful Regex Quick Reference

We will pass out reference sheets in section>

Regular Expressions in PHP

Regex syntax: strings that begin and end with /, such as "/[AEIOU]+/"

function	description
preg_match(regex, string)	returns TRUE if string matches regex
preg_replace (regex, replacement, string)	returns a new string with all substrings that match regex replaced by replacement
preg_split (regex, string)	returns an array of strings from given string broken apart using given regex as delimiter (like `explode` but more powerful)

PHP Validation with Regexes

$state = $_POST["state"];
if (!preg_match("/^[A-Z]{2}$/", $state)) {
   echo "Error, invalid state submitted.";
}

PHP

preg_match and regexes help you to validate parameters

Websites often don't want to give a descriptive error message here (why?)

Regular Expression PHP Examples

# 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

Regular Expressions in JavaScript

Create regular expressions like this: let pattern = /cse154/i or with the RegExp constructor: let pattern = new RegExp(/cse154/, 'i')

Some JavaScript string methods can take Regular Expressions, like search and replace (example search/replace code demo)

let pattern = new RegExp("Spring", "i"); 
// or let pattern = /Spring/i;
let str = "CSE154: Web Programming Spring 2018";
let newStr = str.replace(pattern, "Autumn");

JS

Note there are a variety of useful methods you may find for different things, but there are also a few nuances depending on whether you are using the RegExp or String type in JavaScript. Refer to this helpful page for more of an overview!

Regular Expressions in HTML Forms


<form>
  How old are you?
  <input type="text" name="age" size="2" pattern="[0-9]+" title="an integer" />
  <input type="submit" />
</form>

HTML

HTML5 adds a new pattern attribute to input elements

When an input is in a form along with a button, clicking the button automatically verifies the input and does a POST request. If you are not sending a POST form, you may find it helpful to use preventDefault to override default form submission behavior.

Additional Resources and Regex Fun

HTML Form Validation (MDN): A neat overview of the different features offered in HTML5 for client-side form validation!

RegexOne: A helpful interactive regex tutorial

Regex Crossword Game: A super fun way to practice regex for puzzle-lovers :)

CSE 154