eg-259:lecture7
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
eg-259:lecture7 [2012/02/20 17:07] – [Using Regular Expressions in JavaScript] eechris | eg-259:lecture7 [2013/02/12 20:11] – [Form Validation] eechris | ||
---|---|---|---|
Line 9: | Line 9: | ||
====== Text Processing with Regular Expressions ====== | ====== Text Processing with Regular Expressions ====== | ||
- | **Contact Hour 10**: To be discussed on Tuesday | + | **Contact Hour 10**: To be discussed on Tuesday |
**Lecturer**: | **Lecturer**: | ||
Line 29: | Line 29: | ||
- | ===== Contents of this Lecture | + | ===== Contents of this Session |
Text processing with //regular expressions// | Text processing with //regular expressions// | ||
Line 35: | Line 35: | ||
* [[eg-259: | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
+ | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
Line 103: | Line 104: | ||
* There' | * There' | ||
* You can use either of these tools to play with regular expressions. | * You can use either of these tools to play with regular expressions. | ||
+ | * Here's the [[/ | ||
---- | ---- | ||
Line 232: | Line 234: | ||
// $1 and $2 are both set to " | // $1 and $2 are both set to " | ||
</ | </ | ||
+ | |||
+ | ===== The split function ===== | ||
+ | |||
+ | '' | ||
+ | * Example: | ||
+ | <code javascript> | ||
+ | var str = " | ||
+ | var fruit = str.split(/:/ | ||
+ | // fruit is set to [" | ||
+ | </ | ||
+ | * '' | ||
Line 249: | Line 262: | ||
</ | </ | ||
- | + | ===== Form Validation | |
- | + | ||
- | ===== The split function ===== | + | |
- | + | ||
- | '' | + | |
- | * Example: | + | |
- | <code javascript> | + | |
- | var str = " | + | |
- | var fruit = str.split(/:/ | + | |
- | // fruit is set to [" | + | |
- | </ | + | |
- | * '' | + | |
- | + | ||
- | + | ||
- | + | ||
- | ===== Another Example | + | |
Common use of JavaScript is to check validity of user inputs on forms | Common use of JavaScript is to check validity of user inputs on forms | ||
* avoids a trip to server that would result in an error page | * avoids a trip to server that would result in an error page | ||
* error handling is kept local | * error handling is kept local | ||
- | * usually triggered by // | + | * usually triggered by // |
* error message generated locally by writing into document object. | * error message generated locally by writing into document object. | ||
- | * This example defines a function that could be used in a registration page to check that a phone number is valid (using US conventions!) HTML5 Markup: [[/ | + | * This example defines a function that could be used in a registration page to check that a phone number is valid (using US conventions!) HTML5 Markup: [[http:// |
---- | ---- | ||
Line 282: | Line 280: | ||
This function checks the validity of phone | This function checks the validity of phone | ||
number input from a form | number input from a form | ||
- | --> | + | --> |
- | <html lang=" | + | < |
< | < | ||
- | <meta charset=" | + | <meta charset=" |
+ | <meta http-equiv=" | ||
< | < | ||
+ | <meta name=" | ||
+ | |||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | |||
+ | <script src=" | ||
</ | </ | ||
< | < | ||
- | + | | |
- | <form id=" | + | < |
- | <label for=" | + | |
- | <input id=" | + | <p>An example of the use of Regular Expressions for form validation. |
- | <input type=" | + | View source to see the HTML code and use your browser' |
- | </ | + | < |
- | + | | |
- | < | + | </ |
+ | < | ||
+ | | ||
+ | <label for=" | ||
+ | <input id=" | ||
+ | | ||
+ | <input type=" | ||
+ | </ | ||
+ | | ||
+ | |||
+ | <script src="// | ||
+ | < | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | < | ||
<script src=" | <script src=" | ||
</ | </ | ||
Line 310: | Line 331: | ||
*/ | */ | ||
- | function | + | function |
// Use a simple pattern to check the number of digits and the dash | // Use a simple pattern to check the number of digits and the dash | ||
Line 316: | Line 337: | ||
var ok = num.search(/ | var ok = num.search(/ | ||
- | if(ok == 0) | + | if (ok === 0) { |
return true; | return true; | ||
- | else | + | |
+ | | ||
return false; | return false; | ||
+ | } | ||
+ | | ||
}// end of function tst_phone_num | }// end of function tst_phone_num | ||
/* Actual form validation. Called onclick */ | /* Actual form validation. Called onclick */ | ||
- | var validate = function () { | + | var validate = function() { |
var phoneNumber = document.getElementById(" | var phoneNumber = document.getElementById(" | ||
- | if(tst_phone_num(phoneNumber.value)) { | + | if (test_phone_number(phoneNumber.value)) { |
return true; | return true; | ||
} else { | } else { | ||
alert(" | alert(" | ||
+ | // prevent submission | ||
return false; | return false; | ||
- | // prevents submission | ||
} | } | ||
}; | }; | ||
Line 338: | Line 361: | ||
Test code for '' | Test code for '' | ||
<code javascript> | <code javascript> | ||
- | // Test tst_phone_num -- commented out in production | + | // Test test_phone_number |
- | tests = [" | + | var test_phone_number_test = function() { |
- | for( i = 0; i < tests.length; | + | var tests = [" |
- | var tst = tst_phone_num(tests[i]); | + | for (i = 0; i < tests.length; |
- | if(tst) { | + | var test = test_phone_number(tests[i]); |
- | console.log(tests[i] + " is a legal phone number <br />" | + | if (test) { |
- | } else { | + | console.log(tests[i] + " is a legal phone number <br />" |
- | console.error(" | + | } else { |
+ | console.error(" | ||
+ | } | ||
} | } | ||
- | } | + | }; |
</ | </ | ||
- | ===== Regular Expression Validator in HTML5 ===== | + | ===== HTML5 Pattern Attribute |
+ | |||
+ | A regular expression validator that is built-in to HTML5 | ||
* New '' | * New '' | ||
Line 356: | Line 383: | ||
* E.g. | * E.g. | ||
<code javascript> | <code javascript> | ||
- | <input id=" | + | <input id=" |
+ | placeholder=" | ||
</ | </ | ||
< | < | ||
Line 364: | Line 392: | ||
===== HTML5 Version of the Phone Number Validator ===== | ===== HTML5 Version of the Phone Number Validator ===== | ||
- | * [[/ | + | * [[http:// |
---- | ---- | ||
Line 370: | Line 398: | ||
<code html> | <code html> | ||
< | < | ||
- | < | + | < |
- | Uses the new HTML5 pattern attribute | + | A function tst_phone_num is defined and tested. |
- | to validate | + | This function checks the validity of phone |
- | --> | + | number |
- | <html lang=" | + | --> |
+ | < | ||
< | < | ||
- | <meta charset=" | + | <meta charset=" |
+ | <meta http-equiv=" | ||
< | < | ||
+ | <meta name=" | ||
+ | |||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | |||
+ | <script src=" | ||
</ | </ | ||
< | < | ||
- | + | | |
- | <form id=" | + | < |
- | <label for=" | + | <p>An example of the use of Regular Expressions for form validation. View source to see the code.</ |
- | <input id=" | + | < |
- | | + | < |
- | < | + | </ |
- | <input type=" | + | < |
- | </ | + | this can be used instead of JavaScript for form validation.</ |
- | | + | <p>In production, you would normally need to provide a JavaScript fallback for browsers that don't yet support the < |
+ | <!-- No need for onsubmit validator now --> | ||
+ | | ||
+ | <label for=" | ||
+ | <input id=" | ||
+ | | ||
+ | title=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | | ||
+ | |||
+ | <script src="// | ||
+ | < | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
<!-- Look no scripts! --> | <!-- Look no scripts! --> | ||
</ | </ | ||
Line 448: | Line 500: | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
eg-259/lecture7.txt · Last modified: 2013/02/19 12:29 by eechris