Question

下面我有一个完美的代码，作为一个登录表单。但是我在一个页面上需要20个，因此甚至无法获得第二个登录表单。我一直关注的路线只是复制页面上每个新登录表单的html和javascript，只是使用数字1 ... 2 ... 3等更改id。任何人都可以告诉我为什么我不能在任何时候在页面上使用多个登录表单吗？

主要原因是我不知道如何做一个指向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;
    }
}

Answer 1

您遇到的问题是，在您的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中验证可能实际上是处理用户登录的最糟糕的方式。不要那样做。

Answer 2

正如其他人所说，在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重写函数以检查数组中是否存在Key，在这种情况下，login是包含您要查找的Key的变量。然后使用存储在该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 Example

正如我在开始时所说的那样，我并不建议你实际使用这个例子，因为它对于某人来说非常简单。相反，应使用服务器端脚本技术（例如PHP）或使用评论中建议的内置HTTP Basic Authentication来处理登录。

一页上有多个登录表单

2 个答案: