登录尝试和重定向

Question

I have created some code for a login page. What I want is, if the username and password are correct, then go to the Home.html page. Otherwise, stay on the login page but only give the user 3 attempts to log in. I can't seem to figure out what is wrong as it doesn't count how many attempts I make nor does it redirect to the Home.html page when I get it right.

 var counter = 0; function checkdetails() { var name = "", password = ""; name = form1.txtusername.value password = form1.txtpassword.value if (name == "Shauna" && password == "8nss") { window.alert("Both right") window.location.replace("Home.html"); form1.txtusername.value = "" form1.txtpassword.value = "" } else if (name == "Shauna" && password != "8nss") { window.alert("Incorrect Password.") counter = counter + 1 window.alert(3 - counter + " attempts left") form1.txtusername.value = "" form1.txtpassword.value = "" } else if (name != "Shauna" && password == "8nss") { window.alert("Incorrect Username") counter = counter + 1 window.alert(3 - counter + " attempts left") form1.txtusername.value = "" form1.txtpassword.value = "" } else if (name != "Shauna" && password != "8nss") { window.alert("Both Wrong") counter = counter + 1 window.alert(3 - counter + " attempts left") form1.txtusername.value = "" form1.txtpassword.value = "" } if (counter == 3) { window.alert("Incorrect details - Login failed") window.close() } } 

 <form action="" method="post" name="form1" onsubmit="checkdetails()"> <table bgcolor="white" width="500" border="0" align="center"> <col width="200"> <col width="200"> <tr> <th colspan="2" align="center" bgcolor="grey">Login</th> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td colspan="2" align="center">Username</td> </tr> <tr> <td colspan="2" align="center"> <label> <input type="text" name="txtusername" id="txtusername" class="info" required/> </label> </td> <tr> <td>&nbsp;</td> </tr> <tr> <td colspan="2" align="center">Password</td> </tr> <tr> <td colspan="2" align="center"> <label> <input type="password" name="txtpassword" id="txtpassword" class="info" required/> </label> </td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td colspan="2"> <label> <input type="checkbox" name="terms" value="terms" id="terms" />Remember Me</label> </td> </tr> <br> <br> <br> <tr> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td> <label> <input type="submit" name="Login" id="Login" value="Login" /> </label> </td> <td> <label> <input type="reset" name="Reset" id="Reset" value="Reset" /> </label> </td> </tr> </table> </form> 

Answer 1

Here's one way of doing what you're trying to do via JavaScript. I'm handling the onsubmit of the form and using JavaScript to validate it and return true or false to the handler, depending on how well it validated. I removed quite a bit of the duplication of code effort too and simplified the logic.

NB this is a very poor way of handling logins and client side validation of login attempts, but given that it's just for an assignment exercise, this is just one way to do what you need.

<meta charset="UTF-8">
<script>
var remainingAttempts = 3;

function checkDetails() {
    var name = form1.txtusername.value;
    var password = form1.txtpassword.value;
    console.log('name', name);
    console.log('password', password);
    var validUsername = validateUsername(name);
    var validPassword = validatePassword(password);
    if (validUsername && validPassword) {
        alert('Login successful');
    } else {
        form1.txtusername.value = '';
        form1.txtpassword.value = '';
        remainingAttempts--;

        var msg = '';
        if (validPassword) {
            msg += 'Username incorrect: ';
        } else if (validUsername) {
            msg += 'Password incorrect: ';
        } else {
            msg += 'Both username and password are incorrect: ';
        }

        msg += remainingAttempts + ' attempts left.';
        alert(msg);

        if (remainingAttempts <= 0) {
            alert('Closing window...');
            window.close();
        }
    }

    return validUsername && validPassword;
}

function validateUsername(username) {
    return username == 'Shauna';
}

function validatePassword(password) {
    return password == '8nss';
}
</script>

<form id="form1" name="form1" method="post" action="Home.html" onsubmit="return checkDetails();">
<table>
<tr>
<th colspan="2" align="center" bgcolor="grey">Login</th></tr>
Username
<tr><td colspan="2" align="center"><label><input type="text" name="txtusername" id="txtusername" class="info" required /></tr>
<tr><td>&nbsp;</td></tr>
<tr><td colspan="2" align="center">Password</td></tr>
<tr>
    <td colspan="2" align="center"><label>
    <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
  </label></td>
</tr>
<tr>
    <td colspan="2">
        <label>
        <input type="checkbox" name="terms" value="terms" id="terms"/>Remember Me</label>
    </td>
</tr>
<br><br><br>
<tr>
</tr>
<tr>
    <td>
        <label>
        <input type="submit" name="Login" id="Login" value="Login"/>
        </label>
    </td>
    <td>
        <label>
        <input type="reset" name="Reset" id="Reset" value="Reset" />
        </label>
    </td>
</tr>
</table>
</form>

Answer 2

If you want to redirect user in JavaScript you should do

function Redirect() {
    window.location="http://target.url";
}

Assimilated this, is foolish manage login in JavaScript so I think you should read something that explain differences between client-side and server-side executed code.

EDIT. For managing the max three-time login you can store data in Local Storage

Answer 3

Enforcing a limit on login attempts on the client end is a serious security problem . I wrote scrapers that reverse-engineered what the JavaScript on a page did and submitted valid looking requests. A programmer could easily write a script that uses curl to keep trying username/password combinations until they succeed without worrying about your JavaScript. You should make sure that the server blocks excessive login attempts before you worry about how the client end works.