Home arrow JavaScript arrow Page 4 - Form Validation with JavaScript Regular Expressions (Part 1)
JAVASCRIPT

Form Validation with JavaScript Regular Expressions (Part 1)


Forms are one of the most useful ways to collect information online from customers and potential customers who visit your website. But that information is just a waste of electrons if it is not correct. How can you validate it? This article explains some of the building blocks you can use in JavaScript to at least ascertain that information entered into a form is in the expected format.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 130
May 10, 2005
TABLE OF CONTENTS:
  1. · Form Validation with JavaScript Regular Expressions (Part 1)
  2. · Regular expressions in JavaScript
  3. · Using RegExp
  4. · Other characters
  5. · More fun with escape codes

print this article
SEARCH DEVARTICLES

Form Validation with JavaScript Regular Expressions (Part 1) - Other characters
(Page 4 of 5 )

 

In addition to the flags and repetition quantifiers, there are many other characters that can be used to denote specific things. Positional indicators for example, can be used to state that a specific pattern should appear at the beginning or end of a string. A circumflex checks that the pattern is at the beginning of the string and a dollar sign is used to match the pattern at the end of a string:

var myRegxp = /^www/;

document.write(myRegxp.test("www.mysite.co.uk"));

would output true whereas

var myRegxp = /www$/;

document.write(myRegxp.test("www.mysite.co.uk"));

outputs false. As well as using the circumflex and dollar sign, escape codes can be used to check for other particular characters within strings.

Both parentheses and square brackets can be used to signify different things. First, standard brackets represent grouped characters and square brackets indicate a particular class of characters such as digits or letters. For example, if you wanted to match a pattern consisting of alphanumeric characters, you could use:

var myRegxp = /[0-9a-zA-Z]/

document.write(myRegxp.test(("@"))

As the @ character is not an alphanumeric character, it would output false. Negative classes can also be used by making use again of the circumflex character within the square brackets. Negative classes specify what cannot be included, so by adding the circumflex inside the first square bracket, we can say that any character can be included except for alphanumeric characters:

var myRegxp = /[^0-9a-zA-Z]/

document.write(myRegxp.test(("@"))

 

which now displays true. Using character classes can quickly become cumbersome and increase the size of your script code. To counteract this, JavaScript provides shorthand escape codes that can be used to check for any digits or non-digits, and word or non-word characters, and so forth. The above expression could easily be rewritten as

var myRegxp = /[\D\W]/;

document.write(myRegxp.test(("@"))

which checks for any non-digit or any non-word characters. True is still the result. When using escaped character classes, a lowercase letter signifies that you're checking that the character does appear, and an upper case letter checks that it does not appear, so to check for numbers, use \d and to check for non-numbers, use \D. These shorthand escapes can be used to match numbers (or non-numbers), words (or non-words), and even whitespace (using \w) or non-whitespace (using \W) so you can see that most strokes of the keyboard can be validated in some way or another.


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