Develop a webpage for validation of form fields using regular expressions

Laboratory Objective:

Create interactive webpage using regular expressions for validations.
Compare relevant regular expression for the given character pattern search.
Develop JavaScript to implement validations using the given regular expression.

Regular Expression

A Regular Expression is an object that describes a pattern of characters.
A Regular Expression (also “regexp”, or just “reg”) is a sequence of characters that forms a search pattern.
They are useful for searching and replacing the characters in the string that match a pattern.
For example, regular expressions can be used to validate form fields like email addresses and phone numbers, to perform all types of text search and text replace operations, for counting specific characters in a string.
A regular expression is very similar to a mathematical expression, except it tells the browser how to manipulate text rather than numbers by using special symbols as operators.

Creating Regular Expression

A regular expression could be defined by using two ways:

1) Using RegExp constructor

Syntax - var pattern = new RegExp(pattern [, flags] );

Example - var re1 = new RegExp("xyz", "i");

2) Using literal

Syntax - var pattern = /pattern/flags;

Example - var re2 = /xyz/;

Language of Regular Expression

The language of regular expression consists of following:
1) Character Classes (Brackets)
2) Metacharacters
3) Quantifiers

1) Character Classes (Brackets)

You can group characters by putting them in Square brackets.
Brackets are used to find a range of characters.
[…] matches any one of the characters between the brackets
[^…] matches any one character, but not one of those inside the brackets
(x|y) matches any of the alternatives specified.

2) Metacharacters

Metacharacters are characters with a special meaning within the language of regular expression.

3) Quantifiers

Quantifiers match a number of instances of a character, group, or character class in a string.
The following table list the quantifiers:

RegExp class functions:

Here is a list of the methods associated with RegExp along with their description.

1) exec( ) method

The exec method searches string for text that matches regexp. If it finds a match, it returns an array of results; otherwise, it returns null.
Syntax

RegExpObject.exec( string );

It returns the matched text if a match is found, and null if not.

2) test( ) method

The test method searches string for text that matches regexp. If it finds a match, it returns true; otherwise, it returns false.
Syntax

RegExpObject.test( string );

It returns the matched text if a match is found, and null if not.

String class functions:

1) match(pattern)

Searches for a matching pattern. Returns an array holding the results, or null if no match is found

2) replace(pattern1, pattern2)

Searches for pattern1. If the search is successful pattern1 is replaced with pattern2

3) search(pattern)

Searches for pattern in the string. If the match is successful, the index of the start of the match is returned. If the search fails, the function returns -1.

Sample Programs

1) Write a JavaScript to test if string contains the letter ‘a’ or ‘c’ or both.

<html>

<body>

var input = prompt('Enter some text')

re = /[ac]/

if(re.test(input)) {

alert('The string contains letter a or c or both')

}

else {

alert('String does not contain a or c or both')

}

</script>

</body>

</html>

2) Develop a program to check for valid email id entered by user.

<html>

<head>

<title>Check Email ID</title>

function checkEmail()

{

var email = document.getElementById('email').value

var regex = /^([a-zA-Z0-9_\.]+)@([a-zA-Z0-9_\.]+)\.([a-zA-Z]{2,5})$/

var res = regex.test(email)

if(!res) {

alert('Please enter valid email id')

}

else {

alert('Thank you')

}

</script>

</head>

<body>

Enter Email ID <input type="text" id="email" /><br/>

</form>

</body>

</html>

3) Write a webpage that accepts Username and adharcard as input texts. When the user enters adhaarcard number ,the JavaScript validates card number and diplays whether card number is valid or not. (Assume valid adhaar card format to be nnnn.nnnn.nnnn or nnnn-nnnn-nnnn).

<html>

<head>

function check()

{

var card_no = document.getElementById('card_no').value

var re1 = /\d{4}\.\d{4}\.\d{4}/

var re2 = /\d{4}\-\d{4}\-\d{4}/

var res = re1.test(card_no) || re2.test(card_no)

if(res)

alert('Valid format')

else

alert('Invalid format')

}

</script>

</head>

<body>

Enter AADHAR card no. <input type="text" id="card_no"/><br>

</body>

</html>