INT222 – Internet Fundamentals Week 11: RegExp Object and HTML5 Form Validation 1

Outline JavaScript RegExp object JavaScript RegExp object HTML5 Form field Validation With RegExp HTML5 Form field Validation With RegExp 2

JavaScript RegExp Object Regular expressions are patterns used to match character combinations and perform search-and-replace functions in strings. In JavaScript, regular expressions are also objects. RegExp – is short for regular expression. – is the JavaScript built-in object. 3

Creating RegExp Object Syntax – Pattern: the text of the regular expression. – Modifiers: if specified, modifiers can have any combination of the following values: g - global match i - ignore case m - multiline; 4 var patt=new RegExp(pattern[, modifiers]); or : var patt=/pattern/modifiers;

String Method – match() A String method that executes a search for a match in a string. It returns an array of the found text value. or null on a mismatch. Example 1 5 var str = "Welcome to Toronto"; var patt1 = new RegExp("to", "i"); // i: ignore case-sensitivity var result = str.match(patt1); alert(result); // to

String Method – match() Example 2 Example 3 6 var str = "Welcome to Toronto"; var patt1 = /to/g; // g: do a global search var result = str.match(patt1); alert(result); // to,to var str = "Welcome to Toronto"; var patt1 = /to/ig; // ig: global and case-insensitive var myArray = str.match(patt1); var msg = ""; for(var i=0; i<myArray.length; i++) { msg += "Found " + myArray[i] + "\n"; } alert(msg); // Found to // Found To // Found to

RegExp Method – test() A RegExp method that tests for a match in a string. It returns true or false. Example 7 var str = "Welcome to Toronto"; var patt1 = new RegExp("Me"); var patt2 = new RegExp("Me","i"); var result1 = patt1.test(str); var result2 = patt2.test(str); alert(result1 + "\n" + result2); // false // ture

RegExp Method – exec() A RegExp method that executes a search for a match in a string. – It returns an array of the found text value. – If no match is found, it returns null. Example 8 var myRe = /ab*/g; var str = "abbcdefabh"; var myArray; var msg = ""; while ((myArray = myRe.exec(str)) !== null) { msg += "Next match starts at " + myRe.lastIndex + " -- "; msg += "Found " + myArray[0] + ".\n"; } a lert(msg); // Next match starts at 3 -- Found abb. // Next match starts at 9 -- Found ab.

More RegExp Methods searchA String method that tests for a match in a string. It returns the index of the match, or -1 if the search fails. replaceA String method that executes a search for a match in a string, and replaces the matched substring with a replacement substring. splitA String method that uses a regular expression or a fixed string to break a string into an array of substrings. 9

Special characters in regular expressions charactermeaning ^String begin $String end.Match – one character ?Match – zero or one (preceding character) *Match – zero or more +Match – one or more {m, n}Match – m or n number of preceding character [ ]Character sets delimiters [ ] \d= [0-9], Match – numbers \w= [A-Za-z0-9_], Match – alphanumeric \s= [ \t\r\n], Match – whitespace 10

RegExp Examples To validate: minimum of 4 alphabetical numbers – var pattern1 = /^[a-zA-Z]{4,}$/; To validate: telephone format ###-###-#### – var pattern2 = /^([0-9]{3}[-]){2}[0-9]{4}$/; Example 11 var patt1 = /^[a-zA-Z]{4,}$/; while(1){ var str = prompt("Please enter your last name",""); if(str) { if(patt1.test(str)) alert("Your Last Name: " + str); else alert(“Characters only and at least 4! Try again."); } else break; }

HTML5 Form field Validation With RegExp regular expression HTML 5 introduces pattern attribute to all the various form fields to which regular expression validation applies. Other attributes for form validation – required attribute - handles whether leaving the field empty is valid or not – title attribute can be used as a tooltip – placeholder attribute 12

HTML5 Form field Validation Example – Runs in Chrome browser – Code (on next page) 13

14 HTML Forms - RegExp Validation HTML Forms - RegExp Validation <form id=form1 method=POST action= User Name: <input type=text name=username required pattern="^[a-zA-Z]{4,}$" title="Characters only and minimum 4 characters."> Phone Number: <input type=text name=phonenumber placeholder="###-###-####" required pattern="^([0-9]{3}[-]){2}[0-9]{4}$" title="Please follow the format showed.">

Thank You! 15