Home arrow JavaScript arrow Page 3 - Form Validation with JavaScript Regular Expressions (Part 2)
JAVASCRIPT

Form Validation with JavaScript Regular Expressions (Part 2)


Form validation is an issue many websites must deal with. In this second article in a two-part series, you will use the JavaScript regular expressions you learned in the first article to put together a script that will validate a range of form inputs.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 132
May 17, 2005
TABLE OF CONTENTS:
  1. · Form Validation with JavaScript Regular Expressions (Part 2)
  2. · User-friendly enhancement
  3. · Defining the regular expressions
  4. · Testing the values submitted

print this article
SEARCH DEVARTICLES

Form Validation with JavaScript Regular Expressions (Part 2) - Defining the regular expressions
(Page 3 of 4 )

Next, you need to define the regular expressions that the script will match against your visitors' input:

var fnameRegxp = /^([a-zA-Z]+)$/;

This statement checks that only upper or lowercase case letters, repeated one or more times, pass the validation test, which, unless you’re hoping to send your newsletter to C3PO, should be the case.  Remember when I mentioned that regular expressions can still return true if there are incorrect characters present, provided that the correct pattern of characters is somewhere within the string?  Putting the circumflex and dollar sign at the beginning and end of the regular expression ensures that this does not happen, and that the string is only valid if it contains just what you’re asking for.

var lnameRegxp = /^([a-zA-Z]+)$/;

var houseRegxp = /^([0-9A-Za-z]+)$/;

These then check that the surname entered is also any upper or lowercase character repeated one or more times, and that the house name consists of just numbers and letters. You could have shortened this to /^([\w]+)$/ using the shorthand escape code for "any word character," but that would allow underscores to be used, which rarely feature in property names.  

var pcodeRegxp = /^([A-Za-z]{1,2})([0-9]{2,3})([A-Za-z]
{2})$/;

var telnoRegxp = /^([0-9]{11})$/;

I’ve used local examples for the post code (the UK version of a zip code) and telephone regular expressions. UK postcodes are in a format consisting of one or two letters, followed by two or three numbers (depending on the county), and followed again by two letters. It should be easy to see how you could change this to match your own local form of postal or zip code and telephone number formats. The phone number check simply ensures that the correct number of numbers is present. Following these comes the most complex of regular expressions -- those that check for valid email addresses and URLs:

var emailRegxp = /^([\w]+)(.[\w]+)*@([\w]+)(.[\w]{2,3})
{1,2}$/;

var urlRegxp = /^(http:\/\/www.|https:\/\/www.|ftp:\/
\/www.|www.){1}([\w]+)(.[\w]+){1,2}$/;

Due to sub-domains, there may be any number of characters and dots preceding the @ sign. The first of these expressions says that any word character displayed one or more times can then be followed by a dot, then any number of word characters displayed zero or more times, followed by the @ symbol, followed by any word character displayed one or more times, followed by a dot and two or three word characters repeated at least once but no more than twice, so email addresses ending in .com or .co.uk will pass, whereas .co.uk.com would fail.  Similarly, the URL may begin with either http://www. or https://www. or ftp://www. or just www. once followed by any word character one or more times, followed by a dot and any number of word characters at least once but no more than twice. 

Finally, the date of birth check allows dates in the format dd/mm/yyyy or dd-mm-yyyy, both formats being equally as popular:

var dobRegxp = /^([0-9]){2}(\/|-){1}([0-9]){2}(\/|-)
([0-9]){4}$/;


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials