110 likes | 227 Views
Practical JAVASCRIPT – input validation in My bookstore. Using sample code – Max Ng. Two approaches are going to be demonstrated in this lesson. Field validation Form validation. Javascript is interpreted when on event for field validation. Index.php. 1.
E N D
Practical JAVASCRIPT – input validation in My bookstore Using sample code – Max Ng
Two approaches are going to be demonstrated in this lesson • Field validation • Form validation
Javascript is interpreted when on event for field validation Index.php 1. onblur=“fname_validation(1,15) 2. index-validation.js Function fname_validation(mx,my) ….. A link is built from index.php Function call will trace the index-validation.js for the “fname_validation”
Field validation may not be desirable • Filling sequence is fixed. • It may be very restrictive and annoying. • 3. The validation can be stopped by web browser.
Form validation can be done thru html form onsubmit event. order_summary.php <script src=“ordersummary-validation.js” … 1. onSubmit=“return formValidation();” 4. 6. Action=“ordersubmitted.php” 2. ordersummary-validation.js Function formValidation() document.orderform.submit(); 5. 3.
Let’s take a validation function to examine in details in ordersummary-validation.js Regular expression
Let’s read some regular expression sample here. • /^[0-9]+$/ matches string of “0” to “9” with 1 or more digits. • /^[0-9] {5,8}$/ matches string of “0” to “9”with 5 to 8 digits. How to read? How about this? /^[0-9a-zA-Z]+$/ /^[a-zA-Z]+$/
Let’s read the regexp for email checking this way!! • /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ /^ \w+ ([\.-]?\w+)* @ (\.\w{2,3})+ $/ ([\.-]?\w+)* \w+ ( [\.-]? \w+ )* ( \. \w{2,3} )+ a @ a .aa What is the shortest email mail address allowed?
What have we learnt in this lession? • Field validation • onblur event of each input • use of <script src=…> to link a js file • Form validation • onSubmit event of a form • use of regular expression in javascript function • use of “document.<form>.submit()” to submit to another url as specified in <form … action=“…”>