Home arrow JavaScript arrow Page 10 - Understanding the JavaScript RegExp Object

Working with Forms - JavaScript

Need to match and replace patterns on a Web page? You don't need Perl or PHP - JavaScript can do the job just as well. In this article, find out how, with an introduction to the JavaScript RegExp object and its methods. After reading this tutorial, I'm pretty sure you're going to look at JavaScript in a different light. The language ins't the one most commonly associated with image swaps and browser detection, but it serves as a powerful tool to help you execute pattern-matching tasks in the client quickly and efficiently.

TABLE OF CONTENTS:
  1. Understanding the JavaScript RegExp Object
  2. Enter the Matrix
  3. Two to Tango
  4. Game, Set, Match
  5. Search and Destroy
  6. In Splits
  7. Objects in the Rear-View Mirror
  8. One Mississippi, Two Mississippi...
  9. Changing Things Around
  10. Working with Forms
  11. Over And Out
By: Harish Kamath, (c) Melonfire
Rating: starstarstarstarstar / 144
February 09, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Now that you know how it all works, let's look at a practical example of how you can put this knowledge to good use. Consider the following example, which displays an HTML form asking the user for credit card and email information to complete a purchase.


<html>
<head>
<script 
language
="Javascript">
<!-- start hiding -->
 
// requires regex to be passed as a parameter
function checkField(theForm, 
theFieldtheFieldDisplayobjRegex) {
 
 
objField = eval("document." theForm "." theField);
 
 if(!
objRegex.test(objField.value))  {
  alert 
("Please 
enter a valid " 
theFieldDisplay "");
  objField
.select();
  
objField
.focus();
  
return (false);
 
}
 
return (
true);
}
 
// regex for the various form fields
 
// credit card number 
// must contain 20 digits, nothing more, nothing 
less
objPatCCNum 

/^[
0-9]{20}$/;       
 
// credit card date of expiry 
// must be month between 01 - 12 and year 
between 2003 to 2010
objPatCCDOE 

/^([
0][1-9]|[1][1-2])/20(0[3-9]|10)$/; 
 
// credit card PIN code 
// must be numeric
objPatCCPin = 
/^[0-9]+$/;
 
// email address
// must be in user@host format
objPatCCEmail 
=
/^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/;
 
// check the various form fields
function checkForm(theForm)
{
 
 
if(checkField(theForm"cc_num""Credit card number"objPatCCNum
&&

checkField
(theForm"cc_doe""Date of expiry"objPatCCDOE
&&

checkField
(theForm"cc_pin""PIN code"objPatCCPin
&&

checkField
(theForm"cc_email""Email address"objPatCCEmail)) 
{

 
return true;
} else {
  
return 
false;
 
}
}
// stop hiding 
-->
</script>

</head>
 
<body>
 
<h2>Credit Card Information</h2>
<form 
name="frmCCValidation" onSubmit="return checkForm('frmCCValidation');">
 
Credit card number <br>
<input name="cc_num" type="text">
 
<p>
 
Credit card type <br>
<select name="cc_type">
<option 
value="Visa">Visa</option>
<option 
value="Mastercard">Mastercard</option>
<option 
value="AmericanExpress">American 
Express</option>
</select>
 
<p>
 
Credit card expiry date (mm/yyyy) <br>
<input name="cc_doe" 
type="text">
 
<p>
 
PIN code of card billing address <br>
<input name="cc_pin" 
type="text">
 
<p>
 
Email address <br>
<input name="cc_email" type="text">
 
<p>
 
<input type="submit" value="Send">
 
</form>
 
</body>
</html>

You'll notice, in the example above, that I've used numerous regular expressions to verify that the data being entered into the form by the user is of the correct format. This type of client-side input validation is extremely important on the Web, to ensure that the data you receive is accurate, and in the correct format.



 
 
>>> More JavaScript Articles          >>> More By Harish Kamath, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: