www.hope.ac.uk faculty of sciences and social sciences hope javascript validation regular expression...
Post on 28-Dec-2015
212 Views
Preview:
TRANSCRIPT
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
JavaScript Validation Regular Expression
Stewart Blakewayblakews@hope.ac.ukFML 2130151 291 3113
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Objectives
• More Validation– required fields– passwords– complex passwords– email addresses
• Regular Expression
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
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;
}
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
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;}
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
JavaScript Syntax
• get the string you want to check
var toCheck = document.getElementById(“telnum”).value;
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
JavaScript Syntax
• define the conditions of the check
var re = / the conditions /;
www.hope.ac.uk Faculty of Sciences and Social Sciences
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);
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
JavaScript Syntax• perform an action depending on result
if (result){alert ("correct");}
else{alert ("incorrect");}
www.hope.ac.uk Faculty of Sciences and Social Sciences
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");
}
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
JavaScript Syntax• You could go one step further
if (re.test(document.getElementById(“telnum”).value))
{
alert ("correct");
}
else
{
alert ("incorrect");
}
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
{
alert ("incorrect");
}
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9]+$/
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9]+$/
Start and End of Regular Expression
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9)+$/
Check from the beginning of the string
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9]+$/
Until the end of the string
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9]+$/
Start and Finish of a range
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9]+$/
The range
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9]+$/
At least one or more of the previous
? Zero or 1 and no more
* Zero or more
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Exact Number of Characters
• {n}
re = /^[0-9]{11}$/
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
At least Number of Characters
• {n,}
re = /^[0-9]{5,}$/
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Between Number of Characters
• {n,m}
re = /^[0-9]{5,15}$/
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Looking for specific words
re = /cat/
Why have we removed the ^ and the $ ?
matches
my cat is green
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Looking for specific words
re = /^cat/
does not match
my cat is green
does match
cat is green
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Looking for specific words
re = /cat$/
does not match
cat is green
does match
green is my cat
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Examples of use
• You may want to check specific words• But more likely you will want to check for
group patterns
www.hope.ac.uk Faculty of Sciences and Social Sciences
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)
www.hope.ac.uk Faculty of Sciences and Social Sciences
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}$/
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
• 1 – 3 digits
[0-9]{1,3}
re = /^[A-H,J-N,P-T,VWXY]{1}[0-9]{1,3}$/
www.hope.ac.uk Faculty of Sciences and Social Sciences
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}$/
www.hope.ac.uk Faculty of Sciences and Social Sciences
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 .
www.hope.ac.uk Faculty of Sciences and Social Sciences
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; }
}
www.hope.ac.uk Faculty of Sciences and Social Sciences
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;
}
www.hope.ac.uk Faculty of Sciences and Social Sciences
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; }
www.hope.ac.uk Faculty of Sciences and Social Sciences
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; }
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
There should be at least 2 characters after the final period
email = document.getElementById(“email”).value;
dotPosition = email.lastindexOf(“.”);
if (dotPosition+3 > email.length)
{
alert(“Please enter a valid email address”);
return false;
}
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
Signifies the START and END of the Expression
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\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!
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
The Start and Finish parenthesis signifies a group
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\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.
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
The question mark signifies zero or one of the previous item. NOT MORE
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
An @ symbol must appear after the previous condition(s)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
There must be a period
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\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.
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
One or more of the previous MUST exist.
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Regular Expression to Check a Valid Email Address
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
Finally!
The string must end after the previous.
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Using a Regular Expressionre = /^\w+([\.]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
email = document.getElementById(“email”).value;
if (re.test(email)){return true;}
else{alert(“Please enter a valid email address”);return false;}
No Quotes
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
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?
www.hope.ac.uk Faculty of Sciences and Social Sciences
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.
www.hope.ac.uk Faculty of Sciences and Social Sciences
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.
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
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
top related