Создан скрипт формы входа, но он не работает с использованием JavaScript - PullRequest
Новая
       13

Создан скрипт формы входа, но он не работает с использованием JavaScript

0 голосов
/ 10 ноября 2019

Я пытаюсь создать скрипт login.js, который прослушивает событие отправки формы входа. Когда я пытаюсь запустить свой код, он не входит в систему или работает неправильно

Я работаю с JavaScript, который требуется использовать. Я построил форму входа в HTML и работал над функцией входа в JavaScript. Это не может быть встроенный JavaScript, это должен быть отдельный скрипт от HTML. 

var count = 2;

function validate() {
  var un = document.login.username.value;
  var pw = document.login.password.value;
  var valid = false;
  var usernameArray = ["adrian@tissue.com",
    "dduzen1@live.spcollege.edu",
    "deannaduzen@gmail.com"
  ]
  var passwordArray = ["welcome1", "w3lc0m3", "ch1c@g0"]
  for (var i = 0; i < usernameArray.length; i++) {
    if ((un == usernameArray[i]) && (pw == passwordArray[i])) {
      valid = true;
      break;
    }
  }
  if (valid) {
    alert("Login is successful");
    window.location = "index.html";
    return false;
  }
  var again = "tries";
  if (count == 1) {
    again = "try"
  }
  if (count >= 1) {
    alert("Wrong username or password")
    count--;
  } else {
    alert("Incorrect username or password, you are now blocked");
    document.login.username.value = "You are now blocked";
    document.login.password.value = "You are now blocked";
    document.login.username.disabled = true;
    document.login.password.disabled = true;
    return false;
  }
}
<!-- start of login form -->
<div class="login-page">
  <div class="form">
    <form class="register-form" onsubmit="return validate() ;" method="post">
      <input type="text" placeholder="username" />
      <input type="text" placeholder="password" />
      <input type="text" placeholder="email id" />
      <button>Create</button>
      <p class="message">Already registered? <a href="#">Login</a>
      </p>
    </form>

    <form class="login-form">
      <input type="text" placeholder="username" />
      <input type="text" placeholder="password" />
      <button>login</button>
      <p class="message">Not registered? <a href="#">Register</a>
      </p>
    </form>
  </div>
</div>

Для входа на сайт необходимо указать три регистрационные данные, которые я ввел в код. При входе в систему он мигает, как будто он что-то делает, но никуда не уходит и не показывает, что человек вошел в систему.

1 Ответ

0 голосов
/ 10 ноября 2019

Вы не правильно проверяете с возвращаемым предложением, также ваш атрибут onsubmit был в форме регистра.

Используйте атрибут имени в формах

Это поможет вам идентифицировать ваши формыи легко вводить с помощью JavaScript, в противном случае у вас могут возникнуть проблемы с определением того, какой ввод в больших формах. 

<form name="login" class="login-form">
  <input name="user" type="text" placeholder="username" />
  <input name="pass" type="text" placeholder="password" />
  <button>login</button>
  <p class="message">Not registered? <a href="#">Register</a>
  </p>
</form>

Применительно к вашей форме входа в систему вы можете ссылаться на нее, выполнив document.login.

Воспользуйтесь преимуществами по сравнению с собственными HTML-событиями в JavaScript

Способ получения имени пользователя и пароля очень сложен, так как он необходим, вы можете добавить прослушиватель событий в JavaScript и обрабатывать там все: 

const loginForm = document.login;
loginForm.addEventListener("submit", validate);

Это будет вызывать validate каждый раз при отправке формы. Кроме того, он отправляет событие в качестве параметра, поэтому вы можете получить его в своей функции следующим образом: 

function validate(event) {
  event.preventDefault(); // Stop form redirection
  let user = event.target.user.value,
      pass = event.target.pass.value;
  // REST OF THE CODE ...
}

Это проще, поскольку мы добавили атрибуты имени к входам, поэтому мы можем идентифицировать их по user и pass.

Проверка

ПРИМЕЧАНИЕ: Я не рекомендую проверять данные username: password непосредственно в браузере, поскольку этобольшая уязвимость и должен быть проверен на стороне сервера.

Вы можете упростить эту проверку, связав имя пользователя с его паролем в объекте, вместо создания двух массивов. : 

const accounts = {
  "adrian@tissue.com": "welcome1",
  "dduzen1@live.spcollege.edu": "w3lc0m3",
  "deannaduzen@gmail.com": "ch1c@g0"
};

И затем, сохранив значение входных данных в переменных user и pass, вы можете сделать: 

if (accounts[user] == pass) {
    //SUCCESSFUL LOGIN
    console.log('Correct. Logged in!');
  } else {
    //WRONG LOGIN CREDENTIALS
    attempts--;
    validateAttempts();
}

С целью не иметь многокода в поле зрения, вы должны создать другую функцию, единственной задачей которой является проверка, если вы должны заблокировать пользователя или нет.

Результат

Я должен упомянуть, что это будет работать толькочтобы подтвердить форму пользователя, если вам нужно сохранитьсеанс и держать пользователя в системе, вы должны использовать язык на стороне сервера.

Я оставляю вам фрагмент со всеми этими работающими изменениями, убедитесь сами:

const accounts = {
  "adrian@tissue.com": "welcome1",
  "dduzen1@live.spcollege.edu": "w3lc0m3",
  "deannaduzen@gmail.com": "ch1c@g0"
};
const loginForm = document.login;

let attempts = 3;
loginForm.addEventListener("submit", validate);

function validate(event) {
  event.preventDefault();
  let user = event.target.user.value,
      pass = event.target.pass.value;

  if (accounts[user] == pass) {
    //SUCCESSFUL LOGIN
    console.log('Correct. Logged in!');
  } else {
    console.log('Wrong username or password.');
    attempts--;
    validateAttempts()
  }
}

function validateAttempts() {
  if (attempts <= 0) {
    console.log("You are now blocked");
    loginForm.user.value = "You are now blocked";
    loginForm.pass.value = "You are now blocked";
    loginForm.user.disabled = true;
    loginForm.pass.disabled = true;
  }
}
<form name="login" class="login-form">
  <input name="user" type="text" placeholder="username" />
  <input name="pass" type="text" placeholder="password" />
  <button>login</button>
  <p class="message">Not registered? <a href="#">Register</a>
  </p>
</form>
...