多个登录表单在一个页面上

Multiple Login Forms On One Page

本文关键字：一个 登录 表单      更新时间：2023-09-26

下面我有代码，是完美的工作，作为一个单一的登录表单。然而，我需要20这些在一个页面上，到目前为止，甚至不能得到第二个登录表单的工作。我一直在走的路线是简单地复制html和javascript为每个新的登录表单在页面上，只是改变id使用数字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" && 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是一个包含你想要查找的键的变量。然后使用存储在该Key下的数组来提供一些值，以便在代码中使用。

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

^这是你的登录检查函数重写为使用我定义的数组。

JSFiddle例子

正如我在开头所说的，我不建议你实际使用这个例子，因为它非常容易被人绕过。
相反，登录应该使用服务器端脚本技术(例如PHP)或使用内置的HTTP Basic Authentication，如在评论中建议您处理。

相关文章：