Как исправить проверку входа в систему? - PullRequest
Новая
       4

Как исправить проверку входа в систему?

0 голосов
/ 07 мая 2019

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

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

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {
      font-family: cursive;
      font-weight: bold;
      font-size: 20px;
      background-color: #1E90FF;
      text-align: center;
    }

    * {
      box-sizing: border-box;
    }
    /* style the container */
    .container {
      border-radius: 0px;
      background-color: #1E90FF;
      padding: 10px 300px 10px 300px;
    } 

    /* style inputs and link buttons */
    input,
    .btn {
      width: 100%;
      padding: 20px;
      border: none;
      border-radius: 9px;
      margin: 10px 30px;
      opacity: 0.85;
      display: inline-block;
      font-size: 17px;
      line-height: 20px;
      text-decoration: none; 
    }

    input:hover,
    .btn:hover {
      opacity: 5;
    }


    /* style the submit button */
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }

    input[type=submit]:hover {
      background-color: #4CAF50;

    }

    /* bottom container */
    .bottom-container {
      text-align: center;
      background-color: #1E90FF;
      border-radius: 0px 0px 4px 4px;

    }
    </style>
    </head>
    <body>

    <h2>DIVIDE AND CONQUER THE TIMES!</h2>
    <p>Please Login to experience a world of numbers and games!</p>

    <div class="container">
      <form action="/action_page.php">
        <div class="row">
          <h2 style="text-align: Center">LOGIN</h2>
          </div>

            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
          </div>

        </div>
      </form>
    </div>

    <div class="bottom-container">
      <div class="row">
       <a href="#" style="color:white" class="btn">Forgot password?</a>
        <div class="col">
        </div>
      </div>
    </div>

    <script language="javascript">
    function check(form)
    {
    if (form.username.value)=="myusername" && form.password.value == "mypassword")
    {
    window.open('MainMenu.html')
    }
    else
    {
    alert ("Error Password or Username")
    }
    }

    </body>
    </html>

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

1 Ответ

1 голос
/ 08 мая 2019

В дополнение к тому, что прокомментировал @Connum, есть несколько проблем:

1 - Ваш тег <script> не закрыт в конце файла.Вы должны добавить закрывающий тег </script> после кода javascript (или вы можете отделить JavaScript от HTML, как я сделал ниже).

2 - Ваша функция check определена, но никогда не звонил .Предполагая, что вы хотите, чтобы он вызывался при отправке формы, вам понадобится обработчик событий, который будет вызывать вашу функцию при каждом отправке кода.В приведенном ниже фрагменте кода я использую onsubmit.

3 - form.username.value - недопустимый способ выбора элемента DOM.Для этого либо используйте селекторы jQuery, либо придерживайтесь встроенной функции getElementById (или аналогичной).

Ниже приведен фрагмент, который решает эти проблемы (убран CSS для уменьшения беспорядка). 

function check() {
  var userField = document.getElementsByName("username")[0];
  var pwdField = document.getElementsByName("password")[0];
  if (userField.value=="myusername" && pwdField.value == "mypassword") {
        window.open('MainMenu.html');
        return true;
  }
  else {
    alert ("Error Password or Username");
    return false;
  }
}
<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>

    <h2>DIVIDE AND CONQUER THE TIMES!</h2>
    <p>Please Login to experience a world of numbers and games!</p>

    <div class="container">
      <form onsubmit="return check()">
        <div class="row">
          <h2 style="text-align: Center">LOGIN</h2>
          <div>

            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
          </div>

        </div>
      </form>
    </div>

    <div class="bottom-container">
      <div class="row">
       <a href="#" style="color:white" class="btn">Forgot password?</a>
        <div class="col">
        </div>
      </div>
    </div>
   </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...