Ошибки входа и перенаправление

Question

Я создал код для страницы входа. Я хочу, если имя пользователя и пароль верны, перейдите на страницу Home.html. В противном случае, оставайтесь на странице входа, но только дайте пользователю 3 попытки войти. Я не могу понять, что не так, поскольку он не подсчитывает, сколько попыток я делаю и перенаправляю на страницу Home.html когда я понял.

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

Вот один из способов сделать то, что вы пытаетесь сделать с помощью JavaScript. Я обрабатываю onsubmit формы и используя JavaScript, чтобы проверить его и вернуть true или false обработчику, в зависимости от того, насколько хорошо он проверен. Я удалил довольно много дублирования усилий кода и упростил логику.

NB Это очень плохой способ обработки логинов и проверки на стороне клиента попыток входа в систему, но при условии, что это просто упражнение назначения, это всего лишь один из способов сделать то, что вам нужно.

<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

Если вы хотите перенаправить пользователя в JavaScript, вы должны сделать

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

Ассимилированная это, глупо управлять логин в JavaScript, так что я думаю, вы должны прочитать то, что объяснить различия между клиентским и исполняемым кодом на стороне сервера.

EDIT. Для управления максимальным трехкратным входом вы можете хранить данные в Local Storage

Answer 3

Обеспечение ограничение на попытки входа на стороне клиента является проблемой серьезной безопасности. Я написал скребки, которые обратно спроектировали, что сделал JavaScript на странице, и отправили действительные запросы. Программист мог легко написать сценарий, который использует curl, чтобы продолжать попытки сочетания имени пользователя и пароля, пока они не добьются успеха, не беспокоясь о вашем JavaScript. Вы должны убедиться, что сервер блокирует чрезмерные попытки входа в систему, прежде чем беспокоиться о том, как работает клиент.