Как убедиться, что имя пользователя и пароль совпадают с определенным значением, кнопка входа перенаправляет на index.html - PullRequest
Новая
       3

Как убедиться, что имя пользователя и пароль совпадают с определенным значением, кнопка входа перенаправляет на index.html

0 голосов
/ 16 марта 2019

Как убедиться, что имя пользователя и пароль совпадают с определенным значением, кнопка входа перенаправляется на index.html

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
	<title>Login V9</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <!--==============-->
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
    <!--==============-->
	<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <!--==========================================-->
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--==============-->
	<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
    <!--================-->
	<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
    <!--==============-->
	<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
    <!--==============-->
	<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
    <!--==============-->
	<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
    <!--=============-->
	<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
    <!--===============-->
	<link rel="stylesheet" type="text/css" href="css/util.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
    <!--===============-->
</head>
<body>


	<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
		<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
			<form class="login100-form validate-form">
				<span class="login100-form-title p-b-37">
					App 20
				</span>

				<div class="wrap-input100 validate-input m-b-20" data-validate="Enter username or email">
					<input class="input100" type="text" name="username" placeholder="username or email">
					<span class="focus-input100"></span>
				</div>

				<div class="wrap-input100 validate-input m-b-25" data-validate = "Enter password">
					<input class="input100" type="password" name="pass" placeholder="password">
					<span class="focus-input100"></span>
				</div>

				<div class="container-login100-form-btn">
					<button class="login100-form-btn">
						Sign In
					</button>
				</div>

				<div class="text-center p-t-57 p-b-20">
					<span class="txt1">
						Or login with
					</span>
				</div>

				<div class="flex-c p-b-112">
					<a href="#" class="login100-social-item">
						<i class="fa fa-facebook-f"></i>
					</a>

					<a href="#" class="login100-social-item">
						<img src="images/icons/icon-google.png" alt="GOOGLE">
					</a>
				</div>

				<div class="text-center">
					<a href="#" class="txt2 hov1">
						Sign Up
					</a>
				</div>
			</form>


		</div>
	</div>



	<div id="dropDownSelect1"></div>

    <!--==============-->
	<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <!--=============-->
	<script src="vendor/animsition/js/animsition.min.js"></script>
    <!--==============-->
	<script src="vendor/bootstrap/js/popper.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <!--==============-->
	<script src="vendor/select2/select2.min.js"></script>
    <!--===========-->
	<script src="vendor/daterangepicker/moment.min.js"></script>
	<script src="vendor/daterangepicker/daterangepicker.js"></script>
    <!--===============-->
	<script src="vendor/countdowntime/countdowntime.js"></script>
    <!--==================-->
	<script src="js/main.js"></script>

    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 16 марта 2019

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

Вы должны держать только одну кнопку в теге формы, потому что все кнопки по умолчанию имеют тип = "отправить" в форме. Или вы должны указать другие кнопки type = "button".

Вот как я бы предложил это сделать. 

<form action="/validateUserNameAndPassword">
    <div class="wrap-input100 validate-input m-b-20" data-validate="Enter username or email">
        <input class="input100" type="text" name="username" placeholder="username or email">
        <span class="focus-input100"></span>
    </div>
    <div class="wrap-input100 validate-input m-b-25" data-validate="Enter password">
        <input class="input100" type="password" name="pass" placeholder="password">
        <span class="focus-input100"></span>
    </div>
    <div class="container-login100-form-btn">
        <button type="submit" class="login100-form-btn">
            Sign In
        </button>
    </div>
</form>
0 голосов
/ 16 марта 2019

Это зависит от вас.Если это просто забавный веб-сайт, вы можете выполнить проверку на стороне клиента в другом js-файле, на который вы ссылаетесь, или вы можете поместить скрипт в теги <script></script>.Тем не менее, проверка незашифрованных паролей является ужасной идеей и не должна ни при каких обстоятельствах использоваться в публичных целях.Самый простой способ с этим маршрутом - просто проверить имя пользователя и пароль по карте.

Лучшее решение - запустить это приложение на веб-сервере Go, PHP, node.js или что-нибудь еще.В этом случае вам нужно правильно хешировать, солить пароли и надежно их хранить.Когда клиент пытается войти в систему, проверка выполняется для хешированной и соленой версии его стороны сервера паролей, и клиент получит ответ, указывающий на успех или сбой, и, возможно, установив файл cookie сеанса.Есть много статей об этом процессе, и я уверен, что будет более подробный ответ на этот вопрос.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...