0% found this document useful (0 votes)
11 views46 pages

ST Lab Manual

Uploaded by

moksh patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
11 views46 pages

ST Lab Manual

Uploaded by

moksh patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

Software Tools

LAB MANUAL
(Semester – II)

Student Name :

Enrollment No. : Division :

Branch :

Academic Year :
Krishna School of Emerging Technology
& Applied Research

satisfactorily completed his/her work in ST Lab


INDEX

Sr No. Date Practical Grade Sign


1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 10
11 11
12 12
13 13
Practical-1
AIM: Introduction to web server installation
and configuration. What is web server?

A web server is a computer that runs websites. The basic


objective of the web server is to store, process and deliver
web pages to the users. This intercommunication is done using
Hypertext Transfer Protocol (HTTP). The browser might then
make further requests based on the HTML content — like CSS,
JavaScript, and graphic files.

1. XAMPP- XAMPP is a free and open-source cross-platform web


server solution stack package developed by Apache Friends,
consisting mainly of the Apache HTTP Server, MariaDB database,
and interpreters for scripts written in the PHP and Perl
programming languages.

2. WAMP- WampServer refers to a solution stack for the


Microsoft Windows operating system, created by Romain Bourdon
and consisting of the Apache web server, OpenSSL for SSL
support, MySQL database and PHP programming language.

3. LAMP- Linux Apache MySQL PHP. It is an open-source Web


development platform that uses Linux as the operating system,
Apache as the Web server, MySQL as the relational database
management system and PHP as the object-oriented scripting
language. (Sometimes Perl or Python is used instead of PHP.)

4. MAMP- Mac Apache MySQL or MariaDB PHP. It is a solution


stack composed of free and open-source proprietary commercial
software used together to develop and run dynamic websites on
Apple Macintosh computers.

Enrollment number (0000000000) 1


Steps to install XAMPP Server:

Enrollment number (0000000000) 2


Enrollment number (0000000000) 3
Enrollment number (0000000000) 4
Enrollment number (0000000000) 5
Enrollment number (0000000000) 6
Practical-2
AIM: Create following tables in HTML.

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 2</title>
</head>
<body>
<table border = "1" height = "50" width = "50%">
<tr>
<td colspan="4" align="center">India</td>
</tr>
<tr>
<td rowspan="2" align="center">Australia</td>
<td colspan="2" align="center">USA</td>
<td align="center">Spain</td>
</tr>
<tr>
<td align="center">Switzerland</td>
<td align="center">Italy</td>
<td rowspan="2" align="center">Japan</td>
</tr>
<tr>
<td align="center">China</td>
<td align="center">Myanmar</td>
<td align="center">South Korea</td>
</table>

Enrollment number (0000000000) 7


<br>
<br>
<table border = "1" height = "50" width = "50%">
<tr>
<td rowspan="3" align="center">A</td>
<td align="center">B</td>
<td align="center" colspan="2">C</td>
<td align="center">D</td>
<td align="center" colspan="2" rowspan="2">E</td>
</tr>
<tr>
<td align="center">F</td>
<td align="center">G</td>
<td align="center" rowspan="3">H</td>
<td align="center">I</td>
</tr>
<tr>
<td align="center" rowspan="2">J</td>
<td align="center">K</td>
<td align="center">L</td>
<td align="center">M</td>
<td align="center">N</td>
</tr>
<tr>
<td align="center">O</td>
<td align="center">P</td>
<td align="center" colspan="3">Q</td>
</tr>
</table>
</body>
Output:

Enrollment number (0000000000) 8


Practical-3
AIM: Study all CSS properties and Prepare a CSS
reference sheet in following format:
Property Name Description

Background Properties:
Property Name Description
background-color The background-color property
specifies the background
color of an element.

backgroundimage The background-image property


specifies an image to use as
the background of an element.
By default, the image is
repeated so it covers the
entire element.
backgroundrepeat By default, the background-
image property repeats an
image both horizontally and
vertically. Some images
should be repeated only
horizontally or vertically,
or they will look strange.
backgroundposition The background-position
property is used to specify
the position of the
background image.
backgroundattachment The background-attachment
property specifies whether
the background image should
scroll or be fixed (will not
scroll with the rest of the
page)

Enrollment number (0000000000) 9


Borders/Outline
Property Name Description
border-style The border-style property
specifies what kind of
border to display.
border-width The border-width property
specifies the width of the
four borders.
border-color The border-color property is
used to set the color of the
four borders.
border-radius The border-radius property
is used to add rounded
borders to an element.

Margins:
Property Name Description
margin-top CSS has properties for
margin-right specifying the margin for
margin-bottom each side of an element
margin-left

Paddings:
Property Name Description
padding-top CSS has properties for
padding -right specifying the padding for
padding -bottom each side of an element
padding -left

Enrollment number (0000000000) 10


Text:
Property Name Description
color The color property is used
to set the color of the
text.
text-align The text-align property is
used to set the horizontal
alignment of a text.
text-decoration The text-decoration property
is used to set or remove
decorations from text.
text-transform The text-transform property
is used to specify uppercase
and lowercase letters in a
text.
text-indent The text-indent property is
used to specify the
indentation of the first
line of a text.
letter-spacing The letter-spacing property
is used to specify the space
between the characters in a
text.
line-height The line-height property is
used to specify the space
between lines.
direction The direction property is
used to change the text
direction of an element.
word-spacing The word-spacing property is
used to specify the space
between the words in a text.
text-shadow The text-shadow property
adds shadow to text.

Enrollment number (0000000000) 11


Fonts:
Property Name Description
font-family The font family of a text is
set with the font-family
property.
font-style The font-style property is
mostly used to specify
italic text.
font-size The font-size property sets
the size of the text.
font-weight The font-weight property
specifies the weight of a
font:
font-variant The font-variant property
specifies whether or not a
text should be displayed in
a small-caps font.

Links:
Property Name Description
a:link a normal, unvisited link
a:visited a link the user has visited
a:hover a link when the user mouses
over it
a:active a link the moment it is
clicked

Enrollment number (0000000000) 12


Tables:
Property Name Description
border To specify table borders in
CSS, use the border
property.
border-collapse The border-collapse property
sets whether the table
borders should be collapsed
into a single border.
width Width and height of a table
height are defined by the width and
height properties.
text-align The text-align property sets
the horizontal alignment
(like left, right, or
center) of the content in
or.
vertical-align The vertical-align property
sets the vertical alignment
(like top, bottom, or
middle) of the content in
or.
padding To control the space between
the border and the content
in a table, use the padding
property on and elements.

Display:
Property Name Description
display The display property
displays the content on
browser.
Visibility The visibility property sets
the visibility of the
content

Enrollment number (0000000000) 13


Practical-4
AIM: A. Create a HTML table of your choice and do the
followings using internal CSS:

1. Set solid border with width 2px and blue color

2. Set first row as header with dark gray color and


bold text

3. Set background of odd row with #ffffff and even


#ddd color code

4. Set #f5f5dc color of row when user hover mouse on


it.

B. Create an order list of your choice and do the


followings:

1. Set an image as list item maker

2. Change list item position property Set text color


blue with odd and red with even list item
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 4</title>
</head>
<style>
table,td
{
border-style: solid;
border-width: 2px;
border-color: blue;
}
#first
{

Enrollment number (0000000000) 14


font-weight: bold;
background-color: gray;
}
tr:nth-child(odd)
{
background-color: #ffffff;
}
tr:nth-child(even)
{
background-color: #ddd;
}
tr:hover
{
background-color: #f5f5dc;
}
ol
{
list-style-image: url(BITS-Edu-Campus-Logo.png);
}
li:nth-child(odd)
{
color: blue;
}
li:nth-child(even)
{
color: red;
}
li
{
width: 380px;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<table border = "1" height = "50" width = "50%">
<tr>
<th id=first align="center">Babaria Institute of
Technology.</th>
</tr>
<tr>

Enrollment number (0000000000) 15


<td align="center">Electronics &
Communication</td>
</tr>
<tr>
<td align="center">Information & Technology</td>
</tr>
<tr>
<td align="center">Computer Science
Engineering</td>
</tr>
<tr>
<td align="center">Electrical Engineering</td>
</tr>
<tr>
<td align="center">Mechanical Engineering</td>
</tr>
<tr>
<td align="center">Civil Engineering</td>
</tr>
</table>
<h1 align="center">Babaria Institute of
Technology.</h1>
<ol>
<li>Electronics & Communication</li>
<li>Information & Technology</li>
<li>Computer Science Engineering</li>
<li>Electrical Engineering</li>
<li>Mechanical Engineering</li>
<li>Civil Engineering</li>
</ol>
</body>
</html>

Enrollment number (0000000000) 16


Output:

Enrollment number (0000000000) 17


Practical-5
AIM: Write two paragraphs with heading and do the
followings using external CSS:

1. Set text color to color code: #838b8b

2. Set first paragraph left and second paragraph


right alignment

3. Headings of paragraph must be in capital letter


and underlined

4. Change font to ‘times new roman’

5. User font size 14px and highlight keywords in


paragraph with bold letter
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 5</title>
</head>
<link rel="stylesheet" href="4.css">
<body>
<h2 class="para1">Paragrah 1</h2>
<p id="first">Lorem ipsum dolor, sit amet consectetur
adipisicing elit.<br>Ad tenetur adipisci repellat odit
fugit facilis ipsa <span>molestias</span><br>, aut nisi
officiis non in nam quos quasi quaerat consequatur
necessitatibus <br> veritatis.<span>fugiat</span> labore
assumenda reiciendis. Sed nisi esse quidem<br> minus
placeat, numquam molestias distinctio ipsam consequuntur
similique voluptatum<br> eum incidunt, quos dolore quo
dicta debitis veritatis odio tempore! Tenetur,
architecto.<br></p>
<h2 class="para2">Paragrah 2</h2>
<p id="second">Lorem ipsum dolor, sit amet consectetur

Enrollment number (0000000000) 18


adipisicing elit.<br> Ad tenetur adipisci repellat odit
fugit facilis ipsa <span>molestias</span><br>, aut nisi
officiis non in nam quos quasi quaerat consequatur
necessitatibus <br>veritatis.<span>fugiat</span>labore
assumenda reiciendis. Sed nisi esse quidem<br>minus
placeat, numquam molestias distinctio ipsam consequuntur
similique voluptatum<br>eum incidunt, quos dolore quo
dicta debitis veritatis odio tempore! Tenetur,
architecto.<br></p>
</body>
</html>
CSS:
body
{
color: #838b8b;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
#first {text-align: left;}
#second {text-align: right;}
h2
{
text-transform: uppercase;
text-decoration: underline;
}
span
{
text-decoration: solid;
color: black;
}
.para2{text-align: right;}
Output:

Enrollment number (0000000000) 19


Practical-6
AIM: Create image gallery using external CSS

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 6</title>
</head>
<link rel="stylesheet" href="6.css">
<body>
<div class="container">
<div class="box"><img src="ana-de-armas.jpg"></div>
<div class="box"><img src="chris-
hemsworth.jpg"></div>
<div class="box"><img src="angelina-
jolie(1).jpg"></div>
<div class="box"><img src="tom-ellis.jpg"></div>
<div class="box"><img src="chloe-grace.jpg"></div>
</div>
</body>
</html>
CSS:
body { background-color: #161616;}
img
{
border-radius: 8px;
transition: 1.2s;
-webkit-filter: grayscale(1);
-webkit-transition: 1.2s;
}
.container {
display:flex;
width: 640px;
height: 640px;
margin-top: 75px;

Enrollment number (0000000000) 20


margin-left: auto;
margin-right: auto;
}
.box {
flex: 0px;
border-radius: 8px;
overflow: hidden;
transition: 1.5s;
margin: 2%;
line-height: 0;
}
.box:hover { flex: 50%; }
.box:hover img
{
transition: 1.2s;
-webkit-filter: grayscale(0);
}

Enrollment number (0000000000) 21


Output:

Enrollment number (0000000000) 22


Practical-7
AIM: Build a html page and prepare proper
layout of page using CSS. You may keep Header,
Footer, Menu, Body and Navigation section on
your page.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 7</title>
</head>
<link rel="stylesheet" href="7.css">
<body>
<div class="header">
<header>Olde Town's Antiques</header>
</div>
<nav class="navbar">
<div class="logo">
<a href="#"><img src="logo(1).png" alt="logo"></a>
</div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
<section calss="home">
<header class="title">Welcome to the 80's</header>
<div class="box1">
<div class="c1">
<h2>Records</h2>
<p>A phonograph record, a vinyl record, or simply
a record is an analog sound storage medium in the
form of a flat disc with an inscribed, modulated
spiral groove.</p>
</div>

Enrollment number (0000000000) 23


<img src="record.jpg" alt="records">
</div>
<div class="box2">
<img src="cassete.jpg" alt="Cassette">
<div class="c2">
<h2>Cassette Tapes</h2>
<p>The Compact Cassette, also commonly called a
cassette tape, audio cassette, or simply tape or
cassette, is an analog magnetic tape recording
format for audio recording and playback.</p>
</div>
</div>
<div class="box1">
<div class="c1">
<h2>Game Boy</h2>
<p>The Game Boy is an 8-bit fourth generation
handheld game console developed and manufactured
by Nintendo. It was first released in Japan on
April 21, 1989, in North America later the same
year, and in Europe in late 1990.</p>
</div>
<img src="gameboy.jpg" alt="gameboy">
</div>
<div class="box2">
<img src="gramophone.jpg" alt="gramophone">
<div class="c2">
<h2>Gramophone</h2>
<p>A phonograph, in its later forms also called a
gramophone or since the 1940s called a record
player, or more recently a turntable, is a device
for the mechanical and analogue recording and
reproduction of sound.</p>
</div>
</div>
<div class="box1">
<div class="c1">
<h2>Walkman</h2>
<p>Walkman, stylised as WALKMAN, is a brand of
portable audio players manufactured and marketed
by Japanese technology company Sony since 1979.
The original Walkman was a portable cassette

Enrollment number (0000000000) 24


player and its popularity made "walkman" an
unofficial term for personal stereos of any
producer or brand.</p>
</div>
<img src="walkman.jpg" alt="walkman">
</div>
<div class="box2">
<img src="macintosh.jpg" alt="macintosh">
<div class="c2">
<h2>Macintosh</h2>
<p>The Apple Macintosh—later rebranded as the
Macintosh 128K is the original Apple Macintosh
personal computer. It played a pivotal role in
establishing desktop publishing as a general
office function.</p>
</div>
</div>
<div class="footer">
<footer>Copyright © 2023 Olde Town's Antiques Inc.
All rights reserved. </footer>
</div>
</section>
</body>
</html>
CSS:
*
{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
html
{
scroll-behavior: smooth;
font-family: JetBrains Mono;
min-height: 100%;
background: #0F2027;
background: -webkit-linear-gradient(to top, #2C5364,
#203A43, #0F2027);

Enrollment number (0000000000) 25


background: linear-gradient(to top, #2C5364, #203A43,
#0F2027);
}
body
{
color: aliceblue;
background-attachment: fixed;
-ms-overflow-style: none;
scrollbar-width: none;
}
.logo {margin: 10px 3px;}
.logo img
{
margin: 3px 6px;
transition: .65s;
}
.logo img:hover {box-shadow: 0px 0px 20px aliceblue;}
.navbar
{
display: flex;
align-items: center;
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 4px;
}
.navbar ul {display: flex;}
.navbar li {list-style: none;}
.navbar li a
{
text-decoration: none;
border-radius: 50px;
padding: 0px ;
color: aliceblue;
padding: 10px 25px;
transition: .65s;
}

Enrollment number (0000000000) 26


.navbar li a:hover
{
color: black;
background-color: aliceblue;
box-shadow: 0px 0px 20px aliceblue;
}
.header
{
text-transform: uppercase;
font-size: 133px;
font-weight: bolder;
margin-top: 100px;
text-align: center;
background: #7F00FF;
background: -webkit-linear-gradient(to top, #E100FF,
#7F00FF);
background: linear-gradient(to top, #E100FF, #7F00FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.title
{
text-align: center;
font-size: 100px;
background: #DAD299;
background: -webkit-linear-gradient(to right, #B0DAB9,
#DAD299);
background: linear-gradient(to right, #B0DAB9, #DAD299);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.box1
{
display: flex;
padding: 6px;
}
.box1 img
{
border-radius: 8px;
margin-left: auto;
height: 650px;

Enrollment number (0000000000) 27


}
.box1 .c1 {margin: 204px 50px;}
.box2
{
display: flex;
padding: 6px;
}
.box2 img
{
border-radius: 8px;
margin-right: auto;
height: 650px;
}
.box2 .c2 {margin: 204px 50px;}
::-webkit-scrollbar {display: none;}
.footer
{
display: flex;
padding: 20px;
width: 100%;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 4px;
}

Enrollment number (0000000000) 28


Output:

Enrollment number (0000000000) 29


Practical-8
AIM: Write a JavaScript to check input string
is palindrome or not.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 8</title>
</head>
<script src="8.js"></script>
<body>
</body>
</html>
JS:
function function1(str)
{
const arr = str.split('');
const revarr = arr.reverse();
const revstr = revarr.join('');
if(str == revstr)
{
alert('String is a palindrome');
}
else
{
alert('String is not a palindrome');
}
}
const str = prompt('Enter a string: ');
function1(str);

Enrollment number (0000000000) 30


Output:

Enrollment number (0000000000) 31


Practical-9
AIM: Write a JavaScript, that uses a loop, that
searches a word in sentence held in an array,
returning the index of the word.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 9</title>
</head>
<body>
</body>
<script src="9.js"></script>
</html>
JS:
function search(){
var x = 0, y=0;
for (i=0;i< text.length;i++)
{
if(text[i] == word[0])
{
for(j=i;j< i+word.length;j++)
{
if(text[j]==word[j-i])
{
y++;
}
if (y==word.length){
x++;
}
}
y=0;
}
}
return ""+word+" was found "+x+" times.";
}

Enrollment number (0000000000) 32


text=prompt('Enter a string');
word=prompt('Search a word');
alert(search());
Output:

Enrollment number (0000000000) 33


Practical-10
AIM: Write a Java script to print following
pattern.
1
0 1

1 0 1
0 1 0 1

1 0 1 0 1
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 10</title>
</head>
<body>
</body>
<script src="10.js"></script>
</html>
JS:
var i, j, s;
for(i=1;i<=5;i++)
{
for(j=i;j<5;j++)
{
document.write("&nbsp &nbsp");
}
for(s=1;s<=i;s++)
{
if((i+s)%2==0)
{
document.write("&nbsp 1 &nbsp");
}
else

Enrollment number (0000000000) 34


{
document.write("&nbsp 0 &nbsp");
}
}
document.write("<br>");
}

Output:

Enrollment number (0000000000) 35


Practical-11
AIM: Write a JavaScript that handles following
events.
I. Gives the key code for the key pressed.
II. The script should give message that "vowel
is pressed" if vowel keys are pressed.
III. Background color should change to red after
releasing the pressed.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical 11</title>
</head>
<body>
<h1 id="heading">Practical 11</h1><br>
Enter the word for code:- <input type="text"
onkeypress="code(event)" size="40">
<p id="code"></p><br>
Enter for checking vowels:- <input type="text"
onkeypress="vowel(event)" size="40">
<p id="vowel"></p><br>
<input type="button" value="color change" id="btn">
</body>
<script src="11.js"></script>
</html>
JS:
function code(event)
{
let unicode=event.which;
document.getElementById("code").innerHTML=unicode;
}
function vowel(event)
{

Enrollment number (0000000000) 36


let x=event.key;
if(x=="a" || x=="A" || x=="e" || x=="E" ||x=="i" ||
x=="I" ||x=="o" || x=="O" ||x=="u" || x=="U" )
{
document.getElementById("vowel").innerHTML="Entered
Key is vowel";
}
else
{
document.getElementById("vowel").innerHTML="Not a
Vowel";
}
}
let a=document.getElementById("btn");
a.addEventListener("click",function onClick(event)
{
document.body.style.background='red';
event.target.style.color='black'
}
)
Output:

Enrollment number (0000000000) 37


Practical-12
AIM: Show the use of JavaScript events for the
following:
I. Trap the exiting of the user from a page.
II. Show the heading. When the mouse is over
the heading the background color should be
red and when the mouse goes out of the
heading, color should change to blue.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 12</title>
</head>
<body>
<h1 id="text" onmouseover="f()"onmouseout="f1()">
Hello</h1>
<script src="12.js"></script>
</html>
JS:
function exit()
{
return " ";
}
function f()
{
document.getElementById("text").style.backgroundColor="red";
}
function f1()
{
document.getElementById("text").style.backgroundColor="blue"
;
}

Enrollment number (0000000000) 38


Output:

Enrollment number (0000000000) 39


Practical-13
AIM: Create a student registration form with
all required field.
Using JavaScript validate following fields.
a. Name (User can enter text only)
b. Password (Min 8char, Max 12char, 1st letter
must be capital alphabet.
c. Phone no. (User can enter only numeric
values, 10 digits only)
d. Email address must in [email protected] format
e. Birthday format (DD/MM/YYYY)
f. Pin code (only 6-digit numbers).

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 13</title>
</head>
<link rel="stylesheet" href="13.css">
<body>
<div class="main">
<form align="center" name="f1" onsubmit="return form() &&
CheckPassword(document.f1.pwd)">
<p>Name<br>
<input type="text" name="nm" id="name">
</p>
<p>Phone No.<br>
<input type="number" name="ph" id="ph">
</p>
<p>Birth date<br>
<input type="date" name="bd" id="bd">
</p>
<p>Pin code<br>

Enrollment number (0000000000) 40


<input type="number" name="pn" id="pn">
</p>
<p>Email<br>
<input type="email" name="email" id="email">
</p>
<p>Password<br>
<input type="password" name="pwd" id="pwd">
</p>
<input type="submit" value="submit" name="submit">
</form>
</div>
</body>
<script src="13.js"></script>
</html>
CSS:
body
{
font-family: JetBrains Mono;
color: aliceblue;
background-color: #181818;
margin-top: 250px;
}
.main
{
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7.3px);
-webkit-backdrop-filter: blur(7.3px);
border: 1px solid rgba(255, 255, 255, 0.38);
height: 400px;
margin-left: 650px;
margin-right: 650px;
}
JS:
function form()
{
var a=document.f1.nm.value;
var b=document.f1.ph.value;
var c=document.f1.bd.value;
var d=document.f1.pn.value;
var mailformat = /\S+@\S+\.\S+/;
if (a=="" || !/^[a-zA-Z]*$/g.test(a))
{
alert("Enter Name");
document.f1.nm.focus();
return false;

Enrollment number (0000000000) 41


}
if (b==""||isNaN(b) ||b.length>10 ||b.length<10)
{
alert("Enter Your Phone Number");
document.f1.ph.focus();
return false;
}
if (c=="")
{
alert("Enter Birth Date");
document.f1.bd.focus();
return false;
}
if (d==""||d.length>6||d.length<6)
{
alert("Enter Pincode");
document.f1.pn.focus();
return false;
}
if(email.value.match(mailformat))
{
document.f1.email.focus();
return true;
}
else
{
alert("Invalid email address.");
document.f1.email.focus();
return false;
}
}
function CheckPassword(inputtxt)
{
var passw = /^(?=.*[A-Z]).{8,12}$/;
if(pwd.value.match(passw))
{
document.f1.pwd.focus();
return true;
}
else
{
alert('Password must be 8 to 12 characters long with first letter
being capital');
document.f1.pwd.focus();
return false;
}
}

Enrollment number (0000000000) 42


Output:

Enrollment number (0000000000) 43

You might also like