Regualr expression is a sequence of character which define a specific pattern and also named as abbreviated regex or regexp and sometimes called a rational expression. we can make regular expression like ( “/ABC/”  ,”Ab_123.Cd” ,”abc123.-@&”…) 

They can be patterns or combination of alphabets(a,b..z) ,numbers(0,1…9), special character     ( |, (),^, ), Quantifiers(*, +, ?), wildcards(.) character set[], character ranges[start ,end] .

In this tutorial, we are going to explain how we can use regular expressions to validate an email address.

Watch the live demo or download code from the link given below

Download script   

 

You can buy our service for a quick solution Mailget and JQuery, CSS3 and PHP Form Validation Script.

Before we explore just have a look over this code below and read it carefully ,it will help us for better understanding the regular expression.

Expression Types 

^ start of string

$ end of string

[a-z] letters a-z inclusive in lower case

[A-Z] letters A-Z inclusive in upper case

[0-9] numbers 0-9 inclusive

[^0-9] no occurrences of numbers 0-9 inclusive

? zero or one of the preceding character(s)

* zero or more of preceding character(s)

+ one or more of preceding character(s)

{2} 2 of preceding character(s)

{2,} 2 or more of preceding character(s)

{2,4} 2 — 4 of preceding character(s)

. any character

(a|b) a OR b

s empty space (known as whitespace)

Regular Expression in Detail

If you would have read the above code then you will find it easy to understand the below regular expression code.

example :- This example will show you that how a email address get validate through regular expression.
we have a regular expression like ,

/^w+[+.w-]*@([w-]+.)*w+[w-]*.([a-z]{2,4}|d+)$/i

 

Make it more simple ,divide this expression in three parts.

Each parts kept inside the parenthesis()

  1. User name

    ( /^w+[+.w-]*@)

regex1

 

  1. / = Begin an expression
  2. ^ = The matched string must begin here, and only begin here
  3. w = any word (letters, digits, underscores)
  4. + = match previous expression at least once, unlimited number of times
  5. [] = match any character inside the brackets, but only match one
  6. +. = match a literal + or .
  7. w = another word
  8. – = match a literal –
  9. * = match the previous expression zero or infinite times
  10. @ = match a literal @ symbol(@ before domain name)

2. Domain name 

(([w-]+.)*w+[w-]*.)

regex2

 

  1. () = make everything inside the parentheses a group (and make them referencable)
  2. [] = another character set
  3. w- = match any word or a literal –
  4. + = another 1 to infinity quantifier
  5. . = match another literal
  6. * = another 0 to infinity quantifier
  7. w+ = match a word at least once
  8. [w-]*. = match a word or a dash at least zero times, followed by a literal dot(.)before extension name

3.Extension 

 (([a-z]{2,4}|d+)$/i)

regex3

 

  1. () = another group
  2. [a-z]{2,4} = match lowercase letters at least 2 times but no more than 4 times
  3. | = “or” (does not match pipe)
  4. d+ = match at least 1 digit
  5. $ = the end of the string
  6. / = end an expression
  7. i = test the string in a case insensitive manner

This script will show you , how to validate a email address through regular expression .

Index.php 

This index page have both html code and java script code , when you will execute this page you will get a form on screen asking for entering the email id and message and then submit form by pressing submit button. and java script code will validate the user for the cases like “unfilled form field” or”filled incorrect text” , in this script email address field is validating by regular expression(regex) which is quite strong validation type.



<?php
if(isset($_POST['emailcheck']))
{
$email =$_POST['emailcheck'];
echo "<script type='text/javascript'>alert('your message has been sent to $email')</script>";
}
?>

<html>

<head>
<title>Regular expression to validate an email address</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link href="css/style.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript">

function validate()
{
if (document.myForm.emailcheck.value == "")
{
alert("Please enter your Email!");
document.myForm.emailcheck.focus();
return false;
}
else
{

/*validating email with strong regular expression(regex)*/
var str=document.myForm.emailcheck.value
/* This is the regular expression string to validate the email address

Email address example : [email protected] ,  [email protected] , [email protected] ,

[email protected] ,  [email protected]

*/

var filter = /^([w-]+(?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([com net org]{3}(?:.[a-z]{6})?)$/i
if (!filter.test(str))
{

alert("Please enter a valid email address!")
document.myForm.emailcheck.focus();
return false;
}
if (document.myForm.msgbox.value == "")
{
alert("Please enter a message!");
document.myForm.msgbox.focus();
return false;
}
}

return(true);
}

</script>

</head>

<body>
<div id="main">
<center><h1>
Validate an Email Address by Regular Expression</h1></center>
<div id="login">

<h2>Contact Form</h2>
<hr>

<div id="right">
<form name="myForm" method="post" action="index.php" onsubmit="return(validate());">
Please input a valid email address:<br /><br />
<input type="text" size=18 name="emailcheck" id="emailcheck"><br /><br />
Message :<br /><br />

<textarea id="txtmsg" name ="msgbox"></textarea>

<input type="submit" value="Submit" id="dsubmit">
</form>
</div>
</div>
</div>

</body>
</html>

Style.css

This script will make your form look good and attractive ,you can go through this script and can play around this by changing the attribute value.with the change in attribute value you will see changes in the designing part of form ,and you can make it of your choice.



@import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:50px auto;
font-family:raleway;
}

span{
color:red;
}

h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}

hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}

#login{
height: 500px;
width: 50%;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 33px;
margin-top: 23px;
margin-left: 200px;
}

input[type=text],input[type=password]{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}

input[type=submit]{
width: 40%;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
}
#profile{
padding:50px;
border:1px dashed grey;
font-size:20px;
background-color:#DCE6F7;
}
i{
color: black;
padding: 18px;
margin: 20px;
}
#right{
width: 326px;

height: 321px;
/* border: 2px solid red; */
border: 1px dashed rgb(215, 215, 215);
box-shadow: 0px 5px 17px 1px #99A3AD, 0px 0px 40px #EEEEEE;
padding: 50px;
margin-left: 25px;

}
#right p{
padding: 20px;
}
#paypal_logo{
margin: 10px 315px;
float: right;
}

#results {
width: 100%;
margin-top: 30px;
//border: 1px solid #ccc;
table-layout: auto;
margin-bottom: 30px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
.head {
font-size: 15px;
font-family: "proxima_novasemibold", sans-serif;
background: #FEFFED;
color: #1d4c55;
border: 1px solid #ccc;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.head th{
//border-right: 1px solid #ccc;
//border-bottom: 1px solid #ccc;
line-height: normal;
padding: 10px 0px;
text-align: left;
padding-left: 3%;
}
td {
//border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: normal;
padding: 10px 0px;
text-align: left;
padding-left:3%;
vertical-align: top;
}

tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

#return {
width: 492px;
height: auto;
float: left;
border-radius: 10px;
font-family: raleway;
border: 2px solid #ccc;
padding: 10px 40px 30px;
margin-bottom: 50px;
}
#return h3#success {
text-align: center;
font-size: 24px;
color: green;
margin-bottom: 10px;
}
#return P {
text-align: left;
}
#return .back_btn {
margin-top: 30px;
text-align: center;
}
#btn {
width: 100%;
background-color: #FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px 70px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 15px;
margin: 0 auto;
}
a{
text-decoration:none;
color: #33BADB;
}
.success_main_heading{
margin-left: -40%;

}
#return h3#fail{
text-align: center;
font-size: 24px;
margin-top: 50px;
color: red;
margin-bottom: 10px;
}
.red{
color:red;
font-weight: bold;
}
ul li{
margin-bottom: 15px;
text-align: justify;
margin-right: 20px;
}
hr.style-four {
margin-bottom: 10px;
width: 300px;
padding: 0;
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
color: #333;
text-align: center;
}
hr.style-four:after {
content: "Note";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1em;
padding: 0 0.25em;
background: white;
font-weight: 600;
}
#dsubmit{

margin-top: 50px;
}
#txtmsg
{
height: 100px;
width: 99.5%;
}

Conclusion :

Hope you would have enjoyed this post, I am sure you will give a try to the script provided and implement it in your own projects as well. Feel free to visit our website again in the future to get in touch with new coding tricks. You can let us know about your feedback in the space provided below :)

Recommended blogs –

Related Posts:

Ajax Image Upload using PHP and jQuery
Set JavaScript Form Action
Javascript : Auto Submit Form Example