Блог

Ниже у меня есть код, который работает отлично, как единая форма входа. Однако мне нужно 20 из них на одной странице, и поэтому я даже не могу заставить работать вторую форму входа. Маршрут, по которому я шел, просто дублирует как html, так и javascript для каждой новой формы входа на странице и просто меняет i.d, используя число 1 … 2 … 3 и т.д. Может кто-нибудь сказать мне, почему я не могу заставить более одной формы входа работать на странице одновременно?

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

HTML

 <input type="text" value=" Username" id="login" style="color:#888; border-radius: 25px;" onfocus="inputFocus(this)" onblur="inputBlur(this)" required>
<input type="text" value=" Password" id="password" style="color:#888; border-radius: 25px;" onfocus="inputFocus(this)" onblur="inputBlur(this)" required>
<input type="button" value="GO" id="goButton" class="gosubmit"  onclick="checkLoginPass()" />
  

JavaScript

 function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}
var checkLoginPass = function () {
    var login = document.getElementById("login").value;
    var pass = document.getElementById("password").value;
    if (login === "Client1" amp;amp; pass === "Client1") {
        window.location.replace("/Design1/index.html");
    }
    else {
        //do something else;
    }
}
  

Проблема, с которой вы столкнулись, заключается в том, что в вашем javascript вы проверяете только значения первого набора полей. Так будет всегда, пока вы делаете это таким образом. И, как говорили другие в своих комментариях, наличие паролей, просто находящихся там в виде открытого текста в javascript, невероятно небезопасно, поскольку любой может просто посмотреть на исходный код js, определить комбинации имени пользователя / пароля и войти в систему.

Правильный способ обработки логинов пользователей — создать единую форму с именем пользователя и паролем, а затем передать эти поля на сервер через отправку стандартной формы. т.е. (невероятно упрощенный для краткости):

 <form method='post' action='handlelogin.php'>
    Username: <input type='text' name='username' id='username' /><br />
    Password: <input type='password' name='password' id='password' /><br />
    <input type='submit' value='Log In' onclick="return [some function that verifies both fields have been entered]()" />
</form>
  

Затем вы проверяете комбинации имени пользователя и пароля на сервере, в handlelogin.php идеале на основе значений базы данных, и оттуда перенаправляете пользователя на основе его учетных данных. Если пользователь / передача недействительны, вы отправляете их обратно на страницу входа и отображаете соответствующую ошибку. Если учетные данные действительны, вы устанавливаете cookie с зашифрованным значением, чтобы указать, что они вошли в систему и от имени кого, а затем помещаете их туда, куда им нужно.

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

Как уже говорили другие, хранить комбинации имени пользователя и пароля в вашем исходном коде JavaScript — плохая идея. Но я хотел бы показать вам, как вы можете использовать массивы для хранения Key -> Value пар и ссылаться на них, чтобы уменьшить количество дублирования кода.

В JavaScript вы можете определить массив следующим образом:

 var _CONFIG = {
    "Client1": {
        "Password": "Client1",
        "Redirect": "/Design1/index.html"
    },
    "Client2": {
        "Password": "Client2",
        "Redirect": "/Design2/index.html"
    }
};
  

^ В этом примере ваш username ключ, а значение — другой массив, содержащий ваш password и путь для перенаправления.

Затем вы можете переписать свою функцию, чтобы проверить, присутствует ли ключ в массиве, используя _CONFIG[login] !== undefined , в данном случае login это переменная, содержащая ключ, который вы хотите найти. Затем используйте массив, хранящийся под этим ключом, чтобы предоставить некоторые значения для использования в вашем коде.

 function checkLoginPass() {
    var login = document.getElementById("login").value;
    var pass = document.getElementById("password").value;
    if ( _CONFIG[login] !== undefined amp;amp; _CONFIG[login]["Password"] == pass) {
        window.location.replace(_CONFIG[login]["Redirect"]);
    }
    else {
        //do something else;
    }
}
  

^ Вот ваша функция проверки входа, переписанная для использования определенного мной массива.

Пример JSFiddle

Как я уже говорил в начале, я не предлагаю вам использовать этот пример, поскольку его очень просто обойти.
Вместо этого логины должны обрабатываться с использованием технологии сценариев на стороне сервера (например, PHP) или с использованием встроенного HTTP Basic Authentication , как предложено вам в комментариях.