Ex No: 2 USERNAME AND PASSWORD VALIDATION
Aim: To write a JavaScript program to validate Username and Password entered by the user.
Algorithm
Step1: Create a folder “Ex2” to place all the HTML files and Image files.
Step2: Create two HTML file “index.html” and “home.html”.
Step3: Add JavaScript code to get value of username and password from the text box.
Step4: Using IF statement compare the username and password value stored.
Step5: If the condition is true open "home.html" page.
Step6: Else display a message using Alert box.
Source Code
Try It

index.html


<!DOCTYPE html>
<html>
 <head>
  <title>Login Check</title> 
 <style>
   header {
	text-align:center;
	height: 100px;
	background-color: Chocolate;
	padding: 10px;
	border-radius: 10px 10px 0px 0px;
   }
   footer {
	text-align:center;
	font-size: 12px;
	height: 50px;
	line-height: 50px;
	background-color: Chocolate;
	padding: 10px;
	border-radius: 10px;
   }
 </style>
 <script type="text/javascript">
 function check_login()
 {
  var usr, pwd, username, password;
  username = "Mani";
  password = "M@ni123";
  usr = document.getElementById("txtusr").value;
  pwd = document.getElementById("txtpwd").value;
  if(usr == username && pwd == password)
  {
   window.location.href = "home.html";
  }
  else
  {
   alert("Invalid Username/Password");
  }
 }
 </script>
 </head>
 <body>  
  <header>
   <h1>Username Password Validation</h1>
  </header> 
  <hr>
  <table>
    <tr>
      <td>Username:</td>
      <td><input type="text" id="txtusr" name="txtusr"></td>
    </tr>
    <tr>
      <td>Password:</td>
      <td><input type="password" id="txtpwd" name="txtpwd"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="button" value="Login" onclick="check_login()"></td>
    </tr>
  </table>
  <footer>
	Developed by K Anbarasan
  </footer>
 </body>
</html>

home.html


<!DOCTYPE html>
<html>
 <head>
  <title>Homepage</title> 
 <style>
   header {
	text-align:center;
	height: 100px;
	background-color: Chocolate;
	padding: 10px;
	border-radius: 10px 10px 0px 0px;
   }
   footer {
	text-align:center;
	font-size: 12px;
	height: 50px;
	line-height: 50px;
	background-color: Chocolate;
	padding: 10px;
	border-radius: 10px;
   }
 </style>
 </head>
 <body>  
  <header>
   <h1>Welcome</h1>
  </header> 
  <hr>
  <h1>Login Successful</h1>
  <footer>
   Developed by K Anbarasan
  </footer>
 </body>
</html>
Result: Thus JavaScript Code is written to validate Username and Password store in variable.