How to create Password Protection in DHtml webpage using java script | Authentication

Start the program. First create the login.html page in these page create two text box (username and password) when user click submit button it call authUser.js java script it check the enter user is valid or not (Now I add username as student and password as student). If valid then it link to welcome.html otherwise. It link to the UnAuthorized.html. If you not enter any character then it display enters the character. And if you type more than eight characters then it display alert text box Enter eight character only.
Save as Login.html Source code in DHtml programming for user authentication
<html>
<head>
<title>Password Protection</title>
<script language="JavaScript" src="authUser.js">
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#333366" vlink="#333366" alink="#333366">
<center> <b>Please enter your Username and Password.</b> <p>
<form name="Login"> <table border="1" cellpadding="2" cellspacing="2" bgcolor="#000000">
<tr><td><font color="#ffffff"><b>Username:</b></font>
<input name="Username" type="text">
</td>
</tr>
<tr><td><font color="#ffffff"><b>Password:</b></font>
<input name="Password" type="password">
</td></tr>
</table>
<br>
<input type="button" value="Enter" onClick="authUser(this.form)">
<input type="reset" value="Reset">
</form>
</center>
</body>
</html>

Save as authUser.js Source code in java script
function authUser(form)
{
if (form.Username.value.length == 0 form.Password.value.length == 0)
{
if (form.Username.value.length == 0)
alert("enter the username")
else
alert("enter the password")
location="Login.html"
}
else if ( form.Username.value.length > 8 form.Password.value.length > 8 )
{
alert("Enter a 8 character only")
location="Login.html"
}
else
{
if ((form.Username.value=="student") && (form.Password.value=="student"))

{
location="Welcome.html"
}
else
{
location="UnAuthorized.html"
}
}
}


Save as UnAuthorized.html Source code in Html programming user authentication
<html>
<head>
<title>You are not authorized to enter!</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#333366" vlink="#333366" alink="#333366">
<center>
<h2><b>Sorry!</b></h2>
<p> You have entered invalid login information!
<br> Please return to the form and try again.
</center>
</body>
</html>

Save as Welcome.html Source code in Html programming
<html>
<head>
<title>Username and Password Accepted!</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#333366" vlink="#333366" alink="#333366">
<center> <h2><b>Thank you!</b></h2>
<p> You have entered the correct Username and Password! </center>
</body>
</html>

Username Password Protection dHtml JavaScript user login

Username Password Protection dHtml JavaScript username and password verification

Related post