Сейчас: 01:50:21   25-го апреля 2024 г.
UsefulScript.ruСкриптыЗащита сайтаФорма ввода логина и пароля
61
205

Форма ввода логина и пароля на JavaScript

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


Для наглядного примера работы данного скрипта кликните по кнопке "Войти на сайт", находящейся чуть ниже. Если в поле "логин" ввести login, а в поле "пароль" pass, то Вас автоматически перебросит на главную страницу нашего сайта. А если в поле "логин" ввести login2, а в поле "пароль" pass2, то Вы уже окажетесь на нашем форуме.


Если вводить какие-либо другие значения в поля "логин" и "пароль", то Вам будет выдано сообщение Неверный логин или пароль! и Вы вернетесь обратно на эту же страничку.



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

JavaScript код:
<script type="text/javascript">
function 
Input(){
login_ok false;
user_name "";
password "";
user_name prompt("Логин","");
user_name user_name.toLowerCase();
password prompt("Пароль","");
password password.toLowerCase();
if (
user_name=="login" && password=="pass") {
 
login_ok true;
 
window.location "index.php";
}
if (
user_name=="login2" && password=="pass2") {
 
login_ok true;
 
window.location "forum/index.php";
}

if (
login_ok==falsealert("Неверный логин или пароль!");
}
</script>

Для вывода формы ввода логина и пароля нам понадобится кнопка, при нажатии на которую появится наша форма. Следовательно, нам необходимо добавить эту кнопку при помощи вот такого небольшого кода:

HTML код:
<div align="center">
 <
form>
  <
input type="button" value="Войти на сайт" onClick="Input()">
 </
form>
</
div>

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

Дата создания: 19:17:14 11.10.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 61663 раз(а).

Комментарии посетителей (15 шт.):
Валерий
5
# 105
(08:56:29  20.03.2012 г.)

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

Administrator
0
# 107
(19:33:45  20.03.2012 г.)

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

Валерий
1
# 108
(20:09:53  20.03.2012 г.)

Да это понятно, только для меня PHP пока еще темный лес. Я просто хотел разместить на сайте дочкины фотки и закрыть страницу паролем.
Ответить

Виталий
0
# 3928
(07:46:15  01.06.2017 г.)

Скажите, пожалуйста. Как изменить логин и пароль? Пол часа изменял код... Всё никак не получается :( Входит только под login и login2 , pass и pass2
if (user_name=="login" && password=="pass") {
login_ok = true;
window.location = "index.php";
}
if (user_name=="login2" && password=="pass2") {

При изменении этих кодов... Не заходит потом... Приходится восстанавливать именно login и pass.
Ответить

Administrator
3
# 3930
(19:08:59  01.06.2017 г.)

Закройте и потом заново откройте браузер, скорее всего JavaScript код закешировался.
Ответить

Иван
0
# 3954
(23:50:28  17.06.2017 г.)

А как изменить стиль кнопки?
Ответить

Administrator
0
# 3964
(13:50:13  22.06.2017 г.)

Вместо кнопки input вы можете использовать любой другой элемент (изображение или блок DIV) с добавлением события onClick="Input()".
Ответить

Юрий
0
# 4407
(21:03:31  28.01.2019 г.)

У меня та же проблема. Работает только именно с login и pass. Если менять - ничего не работает. Пробовал тремя браузерами и кэш чистил, результата нет. Изменить login и pass нельзя, перестает работать.
Ответить

Разработчик сайтов
0
# 4639
(12:22:58  29.04.2020 г.)

Нужно писать только маленькими английскими буквами, если большими - то не работает.
Ответить

Артем
0
# 4493
(22:09:18  20.07.2019 г.)

Здравствуйте, как сделать так чтобы был только пароль?
Ответить

Магнус
2
# 4620
(09:35:21  25.03.2020 г.)

Спасибо! Только у вас нашел решение, а то на всех остальных сайтах ничего!!! А тут все просто и понятно. Дай Бог вам здоровья, особенно, что сейчас коронавирус!
Ответить

flippython5@mail.ru
2
# 4670
(01:13:41  15.06.2020 г.)

Пиши хоть большими буквами, функция .toLowerCase(); все исправит на маленькие т.е. с заглавных на пропись.
Ответить

Снёк
0
# 4758
(16:05:13  03.12.2020 г.)

А как создать страницу чтобы туда не получалось зайти без ввода пароля и логина?

На главную и на форму, я и так могу попасть, а вот как сделать что бы на страницу, например, /secret.php не получалось зайти и требовалось бы ввести login / password?
Ответить

Артур
2
# 4792
(18:23:53  09.02.2021 г.)

Как узнать свой логин и пароль?
Ответить

Артем
0
# 4931
(12:03:16  12.07.2022 г.)

Я не могу сменить пароль и логин я перезашел и все ровно не заходит.
Ответить

Закрыть
Ваше имя:
557 + 8 =
Добавить комментарий:
Ваше имя:
557 + 8 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 5

Мешает ли Вам реклама?