Just Try This: regex

Sunday, June 3, 2012

Simple javascript regex tester

RegEx Tester

source : http://www.regular-expressions.info/javascriptexample.html
For Java RegEx Tester : http://www.regexplanet.com/advanced/java/index.html

Regex syntax

flags

g - global match
i - ignore case
m - match over multiple lines

Escaping

\ - special characters to literal and literal characters to special

Quantifiers

? - matches zero or one times
* - matches zero or more times
+ - matches one or more times
{n} - matches n times
{n, m} - matches at least n times, but not more than m times

Anchors

^ - matches at the start of the line
$ - matches at the end of the line
\b - matches at the beginning or the end of a word

delimiter

(?:x) - matches x not remember the match
x(?=y) - matches x only if x is followed by y
x(?!y) - matches x only if x is not followed by y

Character Escapes

\s - matches whitespace
\S - matches anything but a whitespace
\f - matches a form-feed
\n - matches a linefeed
\r - matches a carriage return
\t - matches a horizontal tab
\v - matches vertical tab
\d - matches any digit
\D - matches anything except digit
\w - matches any alphanumeric character including the underscore. Equivalent to [A-Za-z0-9_]
\W - matches any non-word character. Equivalent to [^A-Za-z0-9_]

Others

. - matches any character except a newline

Some predefined RegEx :

Positive Integers --- ^\d+$
Negative Integers --- ^-\d+$
Integer --- ^-{0,1}\d+$
Positive Number --- ^\d*\.{0,1}\d+$
Negative Number --- ^-\d*\.{0,1}\d+$
Positive Number or Negative Number - ^-{0,1}\d*\.{0,1}\d+$
Phone number --- ^\+?[\d\s]{3,}$
Phone with code --- ^\+?[\d\s]+\(?[\d\s]{10,}$
Year 1900-2099 --- ^(19|20)[\d]{2,2}$
Date (dd mm yyyy, d/m/yyyy, etc.) --- ^([1-9]|0[1-9]|[12][0-9]|3[01])\D([1-9]|0[1-9]|1[012])\D(19[0-9][0-9]|20[0-9][0-9])$
IP v4 --- ^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]){3}$


Personal Name --- ^[\w\.\']{2,}([\s][\w\.\']{2,})+$
Username --- ^[\w\d\_\.]{4,}$
Password at least 6 symbols --- ^.{6,}$
Password or empty input --- ^.{6,}$|^$
email --- ^[\_]*([a-z0-9]+(\.|\_*)?)+@([a-z][a-z0-9\-]+(\.|\-*\.))+[a-z]{2,6}$
domain --- ^([a-z][a-z0-9\-]+(\.|\-*\.))+[a-z]{2,6}$


Match no input --- ^$
Match blank input --- ^[\s\t]*$
Match New line --- [\r\n]|$

Simple and effective form validation using Javascript

The following code uses:

FormValidation.html

<html>
<head>
<title>Consultation Form</title>
<script type=“text/javascript” language=“javascript”>
var regx_name=/^[A-Za-z]{2,30}$/,
 regx_number=/^[0-9]{10}$/,
 regx_mail=/^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*\s+&lt;(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})&gt;$|^(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})$/;
 window.onload = function()
 {
 //onload delegating event
  var inputTag=document.getElementsByTagName(“input”),
   form=document.getElementById(“getDetails”);
  form.onsubmit=validate;
  for(var i=0;i<inputTag.length;i++)
  {
   inputTag[i].onfocus=clearInfo;
   inputTag[i].onblur=showInfo;
  }
 }
 function showInfo()
 {
  var info=document.getElementById(“info”);
  info.innerHTML="";
  switch(this.name)
  {
   case “firstName”:
    if(!validName(this.value)) this.value=“First Name”;
    break;
   case “lastName”:
    if(!validName(this.value)) this.value=“Last Name”;
    break;
   case “countryCode”:
    break;
   case “mobileNumber”:
    if(!validNumber(this.value)) this.value=“Mobile Number”;
    break;
   case “mailId”:
    if(!validMail(this.value)) this.value=“Mail-ID”;
    break;
   default:
    break;
  }
 }
 function clearInfo()
 {
  var info=document.getElementById(“info”);
  switch(this.value)
  {
   case “First Name”:
   this.value="";
   info.innerHTML=“Enter your firstname.Only alphabets allowed.";
    break;
   case “Last Name”:
    info.innerHTML=“Enter your lastname.Only alphabets allowed.";
    this.value="";
    break;
   case “Mobile Number”:
    info.innerHTML=“Enter your mobile number.It should be 10-digits.";
    this.value="";
    break;
   case “Mail-ID”:
    info.innerHTML=“Enter a valid mail-id.";
    this.value="";
    break;
   default:
    break;
  }
 }

 function validate()
 { 
  var fname=document.getElementById(“firstName”).value,
   lname=document.getElementById(“lastName”).value,
   mnumber=document.getElementById(“mobileNumber”).value,
   mailID=document.getElementById(“mailId”).value;
  if(validName(fname) && validName(lname) && validNumber(mnumber) && validMail(mailID))
   return true;
  return false;
 }
 function validName(name)
 {
  return regx_name.test(name);
 }
 function validNumber(number)
 {
  return regx_number.test(number);
 }
 function validMail(mailID)
 {
  return regx_mail.test(mailID);
 }
</script>
</head>
<body>
<div id=“container”>
 <div id=“info”></div>
 <form name=“getDetails” id=“getDetails” method=“GET” action=“action_here”>
  <input type=“text” name=“firstName” id=“firstName” value=“First Name”/>
  <input type=“text” name=“lastName” id=“lastName” value=“Last Name”/>
  <input type=“text” name=“countryCode” id=“countryCode” disabled=“disabled” value="+91”/>
  <input type=“text” name=“mobileNumber” id=“mobileNumber” value=“Mobile Number”/>
  <input type=“text” name=“mailId” id=“mailId” value=“Mail-ID”/>
  <button>Get my FREE consultation!</button>
 </form>
</div>
</body>
</html>

Screen shot:

Click here for demo.
you can also download source.

regex pattern   /^[A-Za-z]{2,30}$/ find valid name.
     ^       indicates begining of string
     [A-Za-z] it matches only albhabets,A-Z indicates match all capital letters,a-z indicates match all small letters
     {2,30}     indicates minimum string length 2 , maximum string length 30
     $    indicates end of string

regex pattern /^[0-9]{10}$/ find valid mobile number.
^    indicates begining of string
     [0-9]    it matches only numberics,0-9 indicates match all numbers
     {10}    indicates string length should exactly 10
     $    indicates end of string

regex pattern /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*\s+<(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})>$|^(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})$/ find valid mail address.

Anonymous function called window.onload=function(){}-it delegate clearInfo(),showInfo() to all input tag's onFocus,onblur respectively.
"form.onsubmit=validate;" - it binds validate() with form's onsubmit event.