1 / 15

INT222 – Internet Fundamentals

INT222 – Internet Fundamentals. Week 11: RegExp Object and HTML5 Form Validation. Outline. JavaScript RegExp object HTML5 Form field Validation With  RegExp. JavaScript RegExp Object.

Download Presentation

INT222 – Internet Fundamentals

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. INT222 – Internet Fundamentals Week 11: RegExpObject and HTML5 Form Validation

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

  3. 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.

  4. 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;

  5. 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

  6. 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

  7. 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

  8. 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.

  9. More RegExp Methods

  10. Special characters in regular expressions

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

  12. 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

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

  14. <!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"/> &nbsp; &nbsp; • <input type ="reset" value = " Clear "/> </p> • </form> • </body></html>

  15. Thank You!

More Related