Monday, January 8, 2018

Regular expression validation in JavaScript

A Regular expressions is a powerful tool in any language. In this tutorial we will be discussing how to use regular expression in JavaScript. Regular expression is the most important part in form validations and it is widely used for search, replace and web crawling systems. A regular expression is also known as RegEx.

or succinctly,
Regular expressions use to detect patterns in strings of text. Regular expressions provides a quick and easy way of matching a string to a pattern. Validation of mobile no, username, email id, website url are possible through Regular expressions.

Learn Regular Expressions by Examples :


SymbolDescription
^Start of string
$End of string
.Any single character
+One or more character
\Escape Special characters
?Zero or more characters

Example :
<script>
  var A =  /^abc.+$/;
  if ( A.test("abcsss") == true ){
    alert("match found");
  }
  else{
    alert("match not found");
  }
</script>

Output : 
Shows a alert message "match found"

Based on above example, we will validate regular expression with different string patterns.

Input should exactly match "abc" characters
var A = /^abc$/;

Input should start with "abc" characters
var B = /^abc/;
Example :
1. abc
2. abcs
2. abcdef

Input should end with "abc" characters
var C = /abc$/;
Example :
1. abc
2. xyzabc
3. xabc

Input should start with "abc" and one character allowed 
var D = /^abc.$/;
Example :
1. abcx
2. abcg

Input should start with "abc" and more than one character allowed

var E = /^abc.+$/;
Example :
1. abcxx
2. abcxy

Input should exactly match with "abc.def" characters

var F = /^abc\.def$/;

Input should exactly match with "abc\def" characters
 F = /^abc\\def$/;

Input should allow any characters followed by "abc"
var G = /^abc.+?$/
Example :
1. abcff
2. abcflsls
3. abcmd...



ExpressionDescription
[abc]Should match any single of character
[^abc]Should not match any single character
[0-9]should matche any decimal digit from 0 through 9
[a-z]should matche any character from lowercase a through lowercase z.
[A-Z]should matche any character from uppercase A through uppercase Z.
[a-Z]should matche any character from lowercase a through uppercase Z.
[a-zA-Z0-9]Characters range lowercase a-z, uppercase A-Z and numbers.
[a-z-._]Match against character range lowercase a-z and ._ refers special character
(.*?)Capture everything enclosed with brackets
(com|info)Input should be "com" or "info"
{2}Exactly two characters
{2,3}Minimum 2 characters and Maximum 3 characters
{2,}More than 2 characters

Based on above regular expression, we have provided below two examples :


Validating website URL using Regular Expression.

var URL = /^(http|https)?:\/\/[a-zA-Z0-9-\.]+\.[a-z]{2,4}/ ;

URL.test(“http://skptricks.com”);        //return true              
URL.test(“http://www.skptricks.com”);    //return true               
URL.test(“http://skptricks.com/index.html”);    //return true
URL.test(“http://skptricks.com/home.html”);    //return true
URL.test(“https://skptricks.com/”);  //return true  


Validating  Mobile Number using Regular Expression.

var Mobile = /^[0-9]{10}$/;

Mobile.test("9920872767");  //return true
Mobile.test("9920867");     //return false
Mobile.test("99208767");    //return false
Mobile.test("990872767");   //return false


ExpressionDescription
\dAny numbers, in another word it is same as [0-9]
\DAny non-digits, in another word it is same as [^0-9]
\wCharacters,numbers and underscore, in another word it is same as[a-zA-Z0-9_]
\WExcept any characters, numbers and underscore, in another word it is same as[^a-zA-Z0-9_]
\sa whitespace character (space, tab, newline)
\Snon-whitespace character

Based on above regular expression, we have provided below example to validate mobile number :


Validating mobile number using regular expression.

var Mobile = /^\d{10}$/;

Mobile.test("9920872767");  //return true
Mobile.test("9920867");     //return false
Mobile.test("99208767");    //return false
Mobile.test("990872767");   //return false

This is all about the Regular Expression validation, if you have any queries please do comments in comment box.


1 comment:

  1. Great thanks, the only thing I wonder is why the pattern needs / at the beginning and at the end.

    ReplyDelete