www.hope.ac.uk faculty of sciences and social sciences hope javascript validation regular expression...

www.hope.ac.uk Faculty of Sciences and Social Sciences

JavaScript Validation Regular Expression

Stewart Blakewayblakews@hope.ac.ukFML 2130151 291 3113

Objectives

• More Validation– required fields– passwords– complex passwords– email addresses

• Regular Expression

Checking for null values!Structured English

variable := form element

if (variable = “”)

display (“You must enter an email address”)

set cursor to missing form element

cancel sending of data

Checking for null values!JavaScript

email = getElementById(“email”).value;if (email == “”) { alert(“You must enter an email address”); document.form1.email.focus(); return false;

Checking Confirmation PasswordsStructured English

variable := form element 1

variable2 := form element 2

if (variable not= variable2)

message box (“You password does not match!”)

clear form element 1

clear form element 2

set cursor to element 1

cancel sending of data

Checking Confirmation PasswordsJavaScript

var password1 = document.getElementById("password1").value;var password2 = document.getElementById("password2").value;

if (password1 != password2){alert("Passwords don't match!");document.form1.password1.value = "";document.form1.password2.value = "";document.form1.password1.focus();return false;}

Regular Expression

• Used for validating strings of text• Extremely Powerful and simple to code once

you understand the syntax• Saves you a huge amount of time

• get the string you want to check• define the conditions of the check• check the string – this will return the result

true or false• perform an action depending on result

JavaScript Syntax

• get the string you want to check

var toCheck = document.getElementById(“telnum”).value;

JavaScript Syntax

• define the conditions of the check

var re = / the conditions /;

JavaScript Syntax

• check the string

re.test(toCheck);

remember it returns true or false – we have to remember this!

var result = re.test(toCheck);

JavaScript Syntax• perform an action depending on result

if (result){alert ("correct");}

else{alert ("incorrect");}

JavaScript Syntax• The last two steps are usually combined.• More efficient coding, more complicated to understand

if (re.test(toCheck))

alert ("correct");

alert ("incorrect");

JavaScript Syntax• You could go one step further

if (re.test(document.getElementById(“telnum”).value))

alert ("correct");

For Now – Keep it simple!var toCheck = document.getElementById(“telnum”).value;

var re = / the conditions /;

var result = re.test(toCheck);

if (result)

alert ("correct");

The Conditions

• You want to allow numbers only!

re = /^[0-9]+$/

The Conditions

re = /^[0-9]+$/

Start and End of Regular Expression

The Conditions

re = /^[0-9)+$/

Check from the beginning of the string

The Conditions

re = /^[0-9]+$/

Until the end of the string

The Conditions

re = /^[0-9]+$/

Start and Finish of a range

The Conditions

re = /^[0-9]+$/

The range

The Conditions

re = /^[0-9]+$/

At least one or more of the previous

? Zero or 1 and no more

* Zero or more

Exact Number of Characters

• {n}

re = /^[0-9]{11}$/

At least Number of Characters

• {n,}

re = /^[0-9]{5,}$/

Between Number of Characters

• {n,m}

re = /^[0-9]{5,15}$/

Looking for specific words

re = /cat/

Why have we removed the ^ and the $ ?

matches

my cat is green

re = /^cat/

does not match

my cat is green

does match

cat is green

re = /cat$/

does not match

cat is green

does match

green is my cat

Examples of use

• You may want to check specific words• But more likely you will want to check for

group patterns

Car Registrations

• Car registrations have adopted several patterns used in mainland UK

• a year letter, 1 to 3 digits, and 3 letters, e.g. J21 YTB

• (I, O, U and Z were not used)

Breaking it down

• A year letter.

re = /^[A-Z]{1}$/

• (I, O, U and Z were not used)

re = /^[A-H,J-N,P-T,VWXY]{1}$/

• 1 – 3 digits

[0-9]{1,3}

re = /^[A-H,J-N,P-T,VWXY]{1}[0-9]{1,3}$/

• and 3 letters (I, O, U and Z were not used)

[A-H,J-N,P-T,VWXY]{3}

re = /^[A-H,J-N,P-T,VWXY]{1}[0-9]{1,3}

[A-H,J-N,P-T,VWXY]{3}$/

Checking an Email Address

1. invalid character(s) ?

2. null value ? (saw this in slide 3 + 4)

3. position of the @ symbol

4. only one @ symbol

5. the final . comes after the @ symbol

6. at least 2 characters after the final .

Invalid Characters

• Email address are not allowed to contain– <a space> / : , ;

email = document.getElementById(“email”).value;invalidChar = “ /:,;”;for (i = 0 ; i <= 4 ; i++){ currentChar = invalidChar.charAt(i);

if (email.indexOf(currentChar) != -1) { alert(“You must enter a valid email address”); document.form1.email.focus();

return false; }

Position of the @ Symbol

• An @ symbol is not allowed to be the first character in an email address but must exist

email = document.getElementById(“email”).value;

atPosition = email.indexOf(“@”);

if (atPosition <= 0)

alert(“Please enter a valid email address”);

return false;

Only one @ Symbol

• Only one @ symbol should appear in a valid email address

email = document.getElementById(“email”).value;atPosition = email.indexOf(“@”);

if (email.indexOf(“@”,atPosition+1) > -1) { alert(“Please enter a valid email address”); return false; }

Final . comes after the @ symbol

The period must come after the @ symbol

email = document.getElementById(“email”).value;atPosition = email.indexOf(“@”);dotPosition = email.lastindexOf(“.”);

if (atPosition > dotPosition) { alert(“Please enter a valid email address”); return false; }

There should be at least 2 characters after the final period

dotPosition = email.lastindexOf(“.”);

if (dotPosition+3 > email.length)

alert(“Please enter a valid email address”);

return false;

• That is a lot of checks on a string of text• There is a shorter way of checking a string

–REGULAR EXPRESSIONS

Regular Expression to Check a Valid Email Address

/^\w+([\.]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

Don’t be put off by the syntax

Regular Expression once understood offers greater flexibility with string handling