Download
1 / 15
150 likes | 241 Views
INT222 – Internet Fundamentals. Week 11: RegExp Object and HTML5 Form Validation . Outline. JavaScript RegExp object HTML5 Form field Validation With RegExp. JavaScript RegExp Object.
E N D
INT222 – Internet Fundamentals Week 11: RegExpObject and HTML5 Form Validation
Outline • JavaScript RegExp object • HTML5 Form field Validation With RegExp
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.
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; varpatt=new RegExp(pattern[, modifiers]);or :varpatt=/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 varstr = "Welcome to Toronto"; var patt1 = new RegExp("to", "i"); // i: ignore case-sensitivity var result = str.match(patt1); alert(result); // to
StringMethod – match() • Example 2 • Example 3 varstr = "Welcome to Toronto"; varpatt1 = /to/g; // g: do a global search var result = str.match(patt1); alert(result); // to,to varstr = "Welcome to Toronto"; var patt1 = /to/ig; // ig: global and case-insensitive varmyArray = str.match(patt1); varmsg = ""; for(vari=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 varstr = "Welcome to Toronto"; varpatt1 = new RegExp("Me"); varpatt2 = new RegExp("Me","i"); varresult1 = patt1.test(str); varresult2 = 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 ofthe found textvalue. • If no match is found, it returns null. • Example varmyRe = /ab*/g; varstr = "abbcdefabh"; varmyArray; varmsg = ""; 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.
RegExp Examples • To validate: minimum of 4 alphabetical numbers • var pattern1 = /^[a-zA-Z]{4,}$/; • To validate: telephone format ###-###-#### • varpattern2 = /^([0-9]{3}[-]){2}[0-9]{4}$/; • Example var patt1 = /^[a-zA-Z]{4,}$/; while(1){ varstr = 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 • 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
HTML5 Form field Validation • Example • Runs in Chrome browser • Code (on next page)
<!DOCTYPE html> • <html lang="en"> • <head> • <meta charset=utf-8> • <title> HTML Forms - RegExp Validation</title> • </head> • <body style="width: 80%; margin: auto;"> • <h3>HTML Forms - RegExp Validation</h3> • <form id=form1 method=POST • action=http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi> • <p>User Name:<br> • <input type=text name=username required pattern="^[a-zA-Z]{4,}$" • title="Characters only and minimum 4 characters."><br> • Phone Number:<br> • <input type=text name=phonenumber placeholder="###-###-####" • required pattern="^([0-9]{3}[-]){2}[0-9]{4}$" • title="Please follow the format showed."></p> • <p><input type="submit" value="Submit"/> • <input type ="reset" value = " Clear "/> </p> • </form> • </body></html>
