Jquery Validation with Regular Expressions

This time I want to explain about "Form validation using regular expressions with jquery". I had developed a tutorial using jquery.validate plugin, It's very simple. Implement this and enrich your web projects. Take a look at LIVE DEMO.

Javascript code
More details about regular expressions. Take a look at this tutorial below:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$.validator.addMethod("email", function(value, element) 
{ 
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value); 
}, "Please enter a valid email address.");

$.validator.addMethod("username",function(value,element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value); 
},"Username are 3-15 characters");

$.validator.addMethod("password",function(value,element)
{
return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value); 
},"Passwords are 6-16 characters");

// Validate signup form
$("#signup").validate({
rules: {
email: "required email",
username: "required username",
password: "required password",
},
});
});
</script>

HTML code
------------------------------------------------------------------------------------------------
<form method="post" action="thank.html" name="signup" id="signup">
Email<br />
<input type="text" name="email" id='email'/><br />
UserName<br />
<input type="text" name="username" id="username" /><br />
Password<br />
<input type="password" name="password" id="password" /><br />
<input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/>
</form>

CSS code
------------------------------------------------------------------------------------------------
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
input
{
width:220px;
height:25px;
font-size:13px;
margin-bottom:10px;
border:solid 1px #333333;
}
label.error 
{
font-size:11px;
background-color:#cc0000;
color:#FFFFFF;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px

 DOWNLOAD DEMO CODE