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

HO

PE

JavaScript Validation Regular Expression

Stewart [email protected] 2130151 291 3113


HO

PE

Objectives

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

• Regular Expression


HO

PE

Checking for null values!Structured English

variable := form element

if (variable = “”)

begin

display (“You must enter an email address”)

set cursor to missing form element

cancel sending of data

end


HO

PE

Checking for null values!JavaScript

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

}


HO

PE

Checking Confirmation PasswordsStructured English

variable := form element 1

variable2 := form element 2

if (variable not= variable2)

begin

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

clear form element 1

clear form element 2

set cursor to element 1

cancel sending of data

end


HO

PE

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;}


HO

PE

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


HO

PE

Usage

• 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


HO

PE

JavaScript Syntax

• get the string you want to check

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


HO

PE

JavaScript Syntax

• define the conditions of the check

var re = / the conditions /;


HO

PE

JavaScript Syntax

• check the string

re.test(toCheck);

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

var result = re.test(toCheck);


HO

PE

JavaScript Syntax• perform an action depending on result

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

else{alert ("incorrect");}


HO

PE

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

if (re.test(toCheck))

{

alert ("correct");

}

else

{

alert ("incorrect");

}


HO

PE

JavaScript Syntax• You could go one step further

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

{

alert ("correct");

}

else

{


}


HO

PE

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

var re = / the conditions /;

var result = re.test(toCheck);

if (result)

{

alert ("correct");

}

else

{


}


HO

PE

The Conditions

• You want to allow numbers only!

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


HO

PE

The Conditions


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

Start and End of Regular Expression


HO

PE

The Conditions


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

Check from the beginning of the string


HO

PE

The Conditions


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

Until the end of the string


HO

PE

The Conditions


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

Start and Finish of a range


HO

PE

The Conditions


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

The range


HO

PE

The Conditions


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

At least one or more of the previous

? Zero or 1 and no more

* Zero or more


HO

PE

Exact Number of Characters

• {n}

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


HO

PE

At least Number of Characters

• {n,}

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


HO

PE

Between Number of Characters

• {n,m}

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


HO

PE

Looking for specific words

re = /cat/

Why have we removed the ^ and the $ ?

matches

my cat is green


HO

PE


re = /^cat/

does not match

my cat is green

does match

cat is green


HO

PE


re = /cat$/

does not match

cat is green

does match

green is my cat


HO

PE

Examples of use

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

group patterns


HO

PE

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)


HO

PE

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}$/


HO

PE

• 1 – 3 digits

[0-9]{1,3}

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


HO

PE

• 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}$/


HO

PE

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 .


HO

PE

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; }

}


HO

PE

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;

}


HO

PE

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; }


HO

PE

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; }


HO

PE

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;

}


HO

PE

Phew!

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

–REGULAR EXPRESSIONS


HO

PE

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


HO

PE


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

Signifies the START and END of the Expression


HO

PE


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

This is a caret. In a regular expression it means start at the beginning of the string that is being inspected


HO

PE


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

Any one character (A-Z, a-z or 0-9 or an underscore. An email address must start with one of these characters!


HO

PE


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

There is one or more of the previous. In this case, A-Z, a-z, 0-9 or an underscore


HO

PE


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

The Start and Finish parenthesis signifies a group


HO

PE


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

The brackets signifies allowed characters. In this example the allowed character is a period or a hyphen.

Note: . Matches any single character except line break characters.


HO

PE


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

The question mark signifies zero or one of the previous item. NOT MORE


HO

PE


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

Test your knowledge so far. Which are valid according to the above selected part of the expression?

1. abc.abc 2. a.a 3. abc@abc3. abcabc 4. -abc 5. abc-abc4. a.a


HO

PE


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

The * means zero or more of the previous. (in this case the group)

This allows for:

abc-abc-abc


HO

PE


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

An @ symbol must appear after the previous condition(s)


HO

PE


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

There must be a period


HO

PE


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

We know the w signifies A-Z, a-z or 0-9 or an underscore.

The { } allows you to enter the number of characters expected. In this case, allow 2 or 3 characters.


HO

PE


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

One or more of the previous MUST exist.


HO

PE


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

Finally!

The string must end after the previous.


HO

PE

Using a Regular Expressionre = /^\w+([\.]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;


if (re.test(email)){return true;}

else{alert(“Please enter a valid email address”);return false;}

No Quotes


HO

PE

In Pairs

• Create a regular expression that matches the following criteria for a post code in the UK.

– must start with an alpha character– can be either one or two characters– must follow by a number– can be either two or three numbers– must follow by two alpha characters

WV10 8DD

L13 6SH

L8 3SF

SA99 1YW


HO

PE

My Answer!

^[A-Za-z]{1,2}\d{2,3} [A-Za-z]{2}$

1. Start at the beginning of the string2. Must start with an alpha character3. Can be One or Two but no more or less4. Must follow by a number5. Can be Two or Three but no more or less6. Must follow by and alpha character7. Must be two8. End of string

WV10 8DD

L13 6SH

L8 3SF

SA99 1YW


HO

PE

In Pairs

• Examine the following expression, write a list of rules for the expression

(^[A-Z]{2}[0-9]{6}[A-DFM]{1}$)

• What might you validate using this expression?


HO

PE

UK National Insurance Number validation

• Starts with two letters, followed by 6 numbers, ends with a single letter.

• The first letter may not be D, F, I, Q, U or Z; • The second letter may not be D, F, I, O, Q, U

or Z; • The final letter is optional.


HO

PE

Credit Cards

• All MasterCard numbers start with the numbers 51 through 55. All have 16 digits.

• All Visa card numbers start with a 4. New cards have 16 digits. Old cards have 13.


HO

PE

Complex Passwords

Regular Expressions can be used to check that the user has entered a complex password

– At least one upper case letter. (A - Z)

– At least one lower case letter. (a - z)

– At least one number. (0 - 9)

– Special Characters: ~ ! $ % ^ & * () _ = , . / ; [] " <> {} \ | - are allowed.

– Spaces, @, ', ?, +, : are not allowed

https://webapps.ou.edu/pass/includes/passwordRules.cfm


HO

PE

Any Questions ?• In your seminars I will be talking to you individually

and as a team to ascertain what you have been doing.

• I expect to see– Storyboards

– Navigation Diagrams

– Website Brief

– Minutes of Last Meeting

– List of assigned roles for individuals

– List of team rules

– Individuals Action Points with Times

– Individuals Plan of Action to address Action Points

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

Documents