Experiment No.

12
Aim: Develop a web page for validation of form fields using regular expression.
Theory:
Regular expression is a feature of JavaScript that allow to specify patterns of characters to be search or
match with the content of variable or any information. It is used to validate data filled in form elements. A
regular expression may tell the browser to find whether a specific character or pattern exists in one or more
lines of text or to replace all concurrences of a word with another word,etc.
A regular expression tells the browser how to manipulate text using special symbols as operators. It begins
and ends with a slash(/). All special characters that are used to create a regular expression are placed
between the slashes. After the first slash , a pair of square bracket ( [ ] ) is used to tell the browser the text or
pattern of characters to be search.
Syntax: regexpvar = / [ search pattern ] / ;
- regexpvar is an object that stores search pattern
- / indicates starting of regular expression
- [ search pattern ] indicated character to be search
-/ indicates end of regular expression

Test method is used with regular expression object to check whether the pattern of characters exist in the
string or not.
Syntax: regexpvar.test(“string”/ variable name that contains string);
In JavaScript , a set of special characters is used to create a regular expression such as [] square bracket.
Special characters used to create a regular expression:
Special character Description
\ Tell the browser to ignore special meaning of the following character.

^ Beginning of string or negation operator. Depending on where it appears in the

regular expression.

$ End of string

+ One or more times, concatenation

* Zero or more characters

? Zero or one time

\b Word boundary i.e. It is used to indicate word in search pattern

\d Any digit -0-9

\D Any nondigit

i Search without matching the case of character

\w Any letter,number or underscore

\W Any character other than a letter,number or underscore

 {n} Exactly n occurrences of the sub pattern or character set

{n,} At least n occurrences of the previous sub-pattern or character set

{n,m} At least n but no more than m occurrences of the previous sub-pattern or character
set.

Finding non matching characters:

A JavaScript application allow you to check illegal characters are not present in a string. A JavaScript
application tell the browser to search for illegal characters by specifying the characters within the square
bracket and carrot (^) as the first character inside it.
Carat symbol (^) tells the browser to determine whether the following characters do not appear in the text. It
works as a negation operator i.e. it will return true value if search pattern is not in the string.

Entering a range of characters:

It is possible to enter range of characters as a search pattern inside square bracket. If all the characters that
one wants to match or does not match are in a series then one need not enter each and every character in a
search pattern. Instead of multiple characters, a range can be specified in a search pattern using [ - ] dash
symbol inside square bracket along with start and end characters.

Matching digits and non digits:

Restricting a text box entry either to digits or non-digits is a common task in many JavaScript applications.
For example, a telephone number must have all digits where as a person’s name must have all non-digit
characters.
\d - It tells the browser to determine whether the text contains digits. The browser returns a true value if at
least one digit appears in the text.
\D - It tells the browser to determine whether the text contains any non-digits. The browser returns a true
value if at least one non-digit character appears in the text.

Matching punctuation and symbols:

In some of the JavaScript applications, you may want the browser to determine whether text contains or does
not contain letters,punctuation or symbols such as @sign in an email address.
\w - It tells the browser to determine whether the text contains a letter,number or an underscore. If the text
contains at least one digit or letter or underscore then it will return true value.
\W - It tells the browser to determine whether the text contains a character other than a letter,number or
underscore i.e. whether text contains special characters. It will return true when text contains at least one
special character.

Matching words:
In some JavaScript application, one can search for a particular word within the text. A word is defined by a
word boundary. A word boundary is specified within a regular expression by using \b special symbol.
Two \b special symbols are used in search pattern to specify word boundary. First \b represents the space at
the beginning of the word and the second \b represents the space at the end of the word.

Replacing the text using regular expressions:

Some application may require to search some pattern from a string and replace it with some other pattern. In
JavaScript replace( ) method is used with regular expression to replace portion of text(pattern) from a string.
The replace( ) method requires two parameters: a regular expression and the replacement text. A regular
expression is used to identify the portion of the string that need to be replaced and if the text is found in the
string then it is replaced with the text specified as a second parameter in replace ( ) method.
With replace ( ) method the original string doesn’t change. The modified string is returned by the replace ( )
method.

Programs:

Basic program to search characters in text(string):

<html>
<head>
<title>Simple Regular Expression</title>
<script type="text/javascript">
function validate( )
{
var name='Bob'
re = / [ bt ] /
if (re.test(name))
{
alert('Found')
}
else
{
alert('Not Found')
}
}
</script>
</head>
<body>
<form>
<p>
<input name="reg" value="test" type="button" onclick=" validate()"/>
</p>
</form>
</body>
</html>
Output:

Program to search for presence of any character between J-P in string. Returns True if series
character is present in string.

<html>
<head>
<title>Simple Regular Expression</title>
<script type="text/javascript">
function validate()
{
var name="welcome to HTML";
re = /[J-P]/;
if (re.test(name))
{
alert('series character is present’);
}
else
{
alert(‘series character is not present');
 }
}
</script>
</head>
<body>
<form>
<p>
<input name="reg" value="test" type="button" onclick=" validate()"/>
</p>
</form>
</body>
</html>
Output:

Program to validate first name:

<html>
<head>
<title>Simple Regular Expression</title>
<script type="text/javascript">
function validate()
{
with(document.forms.form1)
{
var name=form1.t1.value;
re = /\d/
if (re.test(name))
{
alert('InCorrect First Name');
}
else
{
alert('correct First Name');
}
}
}
</script>
</head>
<body>
<FORM name="form1">
<P>
Enter First Name: <input type="text" name="t1">
<INPUT name="reg" value="Submit" type="button" onclick="validate()"/>
</P>
</FORM>
</body>
</html>
Output:

Program to validate telephone number:

<html>
<head>
<title>Simple Regular Expression</title>
<script type="text/javascript">
function validate()
{
with(document.forms.form1)
{
var name=form1.t1.value;
re = /\D/
if (re.test(name))
{
alert('InCorrect contact number');
}
else
{
alert('correct contact number');
}
}
}
</script>
</head>
<body>
<form name="form1">
<p>
Enter contact number: <input type="text" name="t1">
<input name="reg" value="Submit" type="button" onclick="validate()"/>
</p>
</form>
</body>
</html>
Output:

Program to match word:

<html>
<head>
<title>Simple Regular Expression</title>
<script type="text/javascript">
function Searchp()
{
var name="welcome to HTML";
document.write(name);
re = /\bHTML\b/;
document.write("<br><Br>search pattern:", re);
if (re.test(name))
{
document.write("<br><br>Patter found");
}
else
{
document.write("<br><br>Pattern not found");
}
}
</script>
</head>
<body>
<form>
<p>
<input name="reg" value="test" type="button" onclick="Searchp()"/>
</p>
</form>
</body>
</html>
Output:

Program to replace Single Occurrence:

<html>
<head>
<title>Simple Regular Expression</title>
<script type="text/javascript">
function replacemulti()
{
var name="welcome to Client Side Scripting Client Side Scripting";
re = /\bClient\b/;
if (re.test(name))
{
document.write("Original String=" + name);
document.write("<br><br> Regular Expression" + re);
replacedstring=name.replace(re,"Server");
document.write("<br><br> Text to replace: 'Server'");
document.write("<br><br>Replaced String=" + replacedstring);
}
else
{
alert('Not Found')
}
}
</script>
</head>
<body>
<form>
<p>
<input name="b2" value="replacemultiple" type="button" onclick=" replacemulti()"/>
</p>
</form>
</body>
</html>
Output:

Practical Related Question(observation):

1. Write option to search the pattern without case sensitivity.
Ans:

2. Write option to search and replace multiple concurrence of pattern in a string.

Ans:

3. Write use of ^ symbol inside pattern to be search in a string.

Ans:

4. Write a code to validate email id entered in form using regular expression.

Ans: Write code here

Conclusion:
With all the concepts based on regular expression , successfully executed all programs with correct output.