Form Validation with Regular Expressions

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,8}$/;

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>

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,8}$/;
  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,8} allows for a six- to eight-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