Form Validation with Regular Expressions

Welcome to our free Advanced JavaScript Programming tutorial. This tutorial is based on Webucator's Advanced JavaScript Programming course.

Contact Us or call 1-877-932-8228
Form Validation with Regular Expressions

Form Validation with Regular Expressions

Regular expressions make it easy to create powerful form validation functions. Take a look at the following example:

Code Sample:

RegularExpressions/Demos/Login.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script type="text/javascript">
var reEmail = /^(\w+[\-\.])*\w+@(\w+\.)+[A-Za-z]+$/;
var rePassword = /^[A-Za-z\d]{6,10}$/;

function validate(form){
	var email = form.Email.value;
	var password = form.Password.value;
	var errors = [];
		
	if (!reEmail.test(email)) {
		errors[errors.length] = "You must enter a valid email address.";
	}
	
	if (!rePassword.test(password)) {
		errors[errors.length] = "You must enter a valid password.";
	}
	
	if (errors.length > 0) {
		reportErrors(errors);
		return false;
	}
	
	return true;
}

function reportErrors(errors){
	var msg = "There were some problems...\n";
	for (var i = 0; i<errors.length; i++) {
		var numError = i + 1;
		msg += "\n" + numError + ". " + errors[i];
	}
	alert(msg);
}
</script>
</head>
<body>
<h1>Login Form</h1>
<form method="post" action="Process.html" onsubmit="return validate(this);">
		
	Email: <input type="text" name="Email" size="25"><br/>
	Password: <input type="password" name="Password" size="10"><br/>
	*Password must be between 6 and 10 characters and 
	can only contain letters and digits.<br/>
	
	<input type="submit" value="Submit">
	<input type="reset" value="Reset Form">
	</p>
</form>
</body>
</html>

Code Explanation

This code starts by defining regular expressions for an email address and a password. Let's break each one down.

var reEmail = /^(\w+\.)*\w+@(\w+\.)+[A-Za-z]+$/;
  1. The caret (^) says to start at the beginning. This prevents the user from entering invalid characters at the beginning of the email address.
  2. (\w+[\-\.])* allows for a sequence of word characters followed by a dot or a dash. The * indicates that the pattern can be repeated zero or more times. Successful patterns include "ndunn.", "ndunn-", "nat.s.", and "nat-s-".
  3. \w+ allows for one or more word characters.
  4. @ allows for a single @ symbol.
  5. (\w+\.)+ allows for a sequence of word characters followed by a dot. The + indicates that the pattern can be repeated one or more times. This is the domain name without the last portion (e.g, without the "com" or "gov").
  6. [A-Za-z]+ allows for one or more letters. This is the "com" or "gov" portion of the email address.
  7. The dollar sign ($) says to end here. This prevents the user from entering invalid characters at the end of the email address.
var rePassword = /^[A-Za-z\d]{6,10}$/;
  1. The caret (^) says to start at the beginning. This prevents the user from entering invalid characters at the beginning of the password.
  2. [A-Za-z\d]{6,10} allows for a six- to ten-character sequence of letters and digits.
  3. The dollar sign ($) says to end here. This prevents the user from entering invalid characters at the end of the password.
Next

This tutorial is based on Webucator's Advanced JavaScript Programming Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.