www.hope.ac.uk faculty of sciences and social sciences hope javascript validation regular expression...
TRANSCRIPT
![Page 1: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/1.jpg)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
JavaScript Validation Regular Expression
Stewart [email protected] 2130151 291 3113
![Page 2: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/2.jpg)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Objectives
• More Validation– required fields– passwords– complex passwords– email addresses
• Regular Expression
![Page 3: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/3.jpg)
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
![Page 4: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/4.jpg)
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;
}
![Page 5: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/5.jpg)
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
![Page 6: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/6.jpg)
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;}
![Page 7: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/7.jpg)
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
![Page 8: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/8.jpg)
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
![Page 9: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/9.jpg)
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;
![Page 10: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/10.jpg)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
JavaScript Syntax
• define the conditions of the check
var re = / the conditions /;
![Page 11: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/11.jpg)
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);
![Page 12: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/12.jpg)
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");}
![Page 13: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/13.jpg)
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");
}
![Page 14: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/14.jpg)
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");
}
![Page 15: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/15.jpg)
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");
}
![Page 16: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/16.jpg)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
The Conditions
• You want to allow numbers only!
re = /^[0-9]+$/
![Page 17: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/17.jpg)
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
![Page 18: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/18.jpg)
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
![Page 19: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/19.jpg)
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
![Page 20: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/20.jpg)
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
![Page 21: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/21.jpg)
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
![Page 22: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/22.jpg)
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
![Page 23: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/23.jpg)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Exact Number of Characters
• {n}
re = /^[0-9]{11}$/
![Page 24: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/24.jpg)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
At least Number of Characters
• {n,}
re = /^[0-9]{5,}$/
![Page 25: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/25.jpg)
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE
Between Number of Characters
• {n,m}
re = /^[0-9]{5,15}$/
![Page 26: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/26.jpg)
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
![Page 27: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/27.jpg)
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
![Page 28: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/28.jpg)
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
![Page 29: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/29.jpg)
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
![Page 30: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/30.jpg)
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)
![Page 31: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/31.jpg)
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}$/
![Page 32: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/32.jpg)
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}$/
![Page 33: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/33.jpg)
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}$/
![Page 34: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/34.jpg)
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 .
![Page 35: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/35.jpg)
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; }
}
![Page 36: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/36.jpg)
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;
}
![Page 37: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/37.jpg)
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; }
![Page 38: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/38.jpg)
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; }
![Page 39: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/39.jpg)
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;
}
![Page 40: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/40.jpg)
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
![Page 41: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/41.jpg)
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
![Page 42: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/42.jpg)
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
![Page 43: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/43.jpg)
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
![Page 44: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/44.jpg)
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!
![Page 45: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/45.jpg)
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
![Page 46: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/46.jpg)
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
![Page 47: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/47.jpg)
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.
![Page 48: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/48.jpg)
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
![Page 49: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/49.jpg)
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
![Page 50: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/50.jpg)
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
![Page 51: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/51.jpg)
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)
![Page 52: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/52.jpg)
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
![Page 53: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/53.jpg)
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.
![Page 54: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/54.jpg)
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.
![Page 55: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/55.jpg)
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.
![Page 56: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/56.jpg)
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
![Page 57: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/57.jpg)
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
![Page 58: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/58.jpg)
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
![Page 59: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/59.jpg)
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?
![Page 60: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/60.jpg)
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.
![Page 61: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/61.jpg)
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.
![Page 62: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/62.jpg)
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
![Page 63: Www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291](https://reader037.vdocuments.mx/reader037/viewer/2022110402/56649e4b5503460f94b3fef7/html5/thumbnails/63.jpg)
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