1 / 11

Practical JAVASCRIPT – input validation in My bookstore

In this lesson, we'll explore two approaches to input validation in JavaScript. First, we will delve into field validation, which takes place on events such as `onblur`, using sample functions from `index-validation.js`. Then, we will examine form validation, which occurs during form submission (`onsubmit`), referencing the `ordersummary-validation.js` script. We will also learn to utilize regular expressions for validating input fields such as email addresses and numeric entries. With practical examples, this tutorial emphasizes useful validation techniques for enhancing user experience in web applications.

vaughan
Télécharger la présentation

Practical JAVASCRIPT – input validation in My bookstore

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. Practical JAVASCRIPT – input validation in My bookstore Using sample code – Max Ng

  2. Two approaches are going to be demonstrated in this lesson • Field validation • Form validation

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

  4. The outcome is:

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

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

  7. Let’s take a validation function to examine in details in ordersummary-validation.js Regular expression

  8. 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]+$/

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

  10. 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=“…”>

  11. Thanks!!

More Related