How To Create Login Security Using JavaScript

Submitted by alpha_luna on Monday, April 25, 2016 - 14:57.
In this article, we are going to learn on How To Create Login Security Using JavaScript. This source code will protect your websites, systems, or any program that you have right now from a trespasser, stranger, and unauthorized users or a visitors. This code contains If Statement in JavaScript, HTML Form Field, and CSS for the style. Username: sourcecodester Password: tutorial JavaScript Source Code This script will check the username and password input by the user then the If Statement will execute.
  1. <script>
  2. function password_checking(form) {
  3.         if (form.user_name.value=="sourcecodester") {
  4.         if (form.password.value=="tutorial") {              
  5.                 alert("Welcome to the system");
  6.         }
  7.         else {
  8.                  alert("Wrong Password. Please Try Again !!!");
  9.               document.getElementById("username").focus();
  10.              }
  11.         } else {  
  12.                    alert("Wrong Username. Please Try Again ");
  13.                    document.getElementById("username").focus();
  14.                    }
  15.         }
  16.        
  17. function reset_all()
  18. {
  19.  document.getElementById("username").value=""
  20.  document.getElementById("password").value=""
  21.  document.getElementById("username").focus();
  22. }
  23. </script>
HTML Source Code This HTML code contains the username and password textbox where the user typing the correct information to log in.
  1. <form class="form_style">
  2. <table border="0" width="100%" cellpadding="3" cellspacing="3">
  3.         <tr class="tr_header">
  4.                 <td height="10px" colspan="2">Login Security</td>
  5.         </tr>
  6.         <tr bgcolor="azure">
  7.                 <td class="text_label">
  8.                         Username
  9.                 </td>
  10.                 <td style="text-align: center;">
  11.                         <input type="text" name="user_name" class="textBox_style"  placeholder="Username....."   id="username" autofocus>
  12.                 </td>
  13.         </tr>
  14.         <tr bgcolor="azure">
  15.                 <td height="10px" colspan="2"></td>
  16.         </tr>
  17.         <tr bgcolor="azure">
  18.                 <td class="text_label">
  19.                         Password
  20.                 </td>
  21.                 <td style="text-align: center;">
  22.                         <input type="password" name="password"  class="textBox_style"  placeholder="Password....." id="password">
  23.                 </td>
  24.         </tr>
  25.         <tr bgcolor="maroon">
  26.                 <td height="35" colspan="2" style="text-align: center;">
  27.                         <input type="submit" value="Log In" class="btn_login" onClick="password_checking(this.form)">
  28.                         <input type="button"  value="Clear" class="btn_reset" onclick="javascript:reset_all();">
  29.                 </td>
  30.         </tr>
  32. </form>
And, this is the style.
  1. body {
  2.         width:400px;
  3.         margin:auto;
  4. }
  5. .tr_header {
  6.     background: maroon;
  7.     color: white;
  8.     font-size: xx-large;
  9.     text-align: center;
  10. }
  11. .text_label {
  12.         text-align: center;
  13.     font-size: 18px;
  14.     color: blue;
  15.     font-weight: bold;
  16.     font-family: cursive;
  17. }
  18. .form_style {
  19.         margin-top:100px;
  20. }
  21. .btn_login {
  22.         width: 100px;
  23.     font-size: 18px;
  24.     color: blue;
  25.     background: azure;
  26.     border: blue 1px solid;
  27.     border-radius: 4px;
  28.     padding: 5px;
  29.         cursor:pointer;
  30.         margin-right:20px;
  31. }
  32. .btn_reset {
  33.         width: 100px;
  34.     font-size: 18px;
  35.     color: maroon;
  36.     background: azure;
  37.     border: maroon 1px solid;
  38.     border-radius: 4px;
  39.     padding: 5px;
  40.         cursor:pointer;
  41. }
  42. .textBox_style {
  43.     font-size: 18px;
  44.     text-indent: 5px;
  45.     border: blue 1px solid;
  46. }
Output: If the user inputs wrong details to the textbox. Wrong Details If the user inputs correct details to the textbox. Correct Details So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Log In System
Password Security
Creating a Login Form using JavaScript

Add new comment

About text formats
  • 97 views