Question

我试图建立一个网站，人们输入一个代码，然后他们被重定向到一个页面。

每个代码将用户带到不同的页面非常重要例如，代码123将您带到index.html，代码000将用户带到login.html

这是我迄今为止所做的，但它不起作用......我做错了什么？

的index.html：

<form id="form_id" method="post" name="myform">
<br>
<br>
<br>
<label>Code :</label>
<input type="password" name="password" id="password"/>
<input type="button" value="Login" id="submit" onclick="validate()"/>

login.js

function validate(){

var password = document.getElementById("password").value;
 if ( password == "1234" or "0000" or "4444" ){
alert ("Login successfully");
I dont know what to do now or is this script is even correct.

Answer 1

这样做

＆＃13;

document.getElementById("login").addEventListener("click",function(evt){
    var codeEntered = document.getElementById("password").value.trim();
    // For each different code, use location.href to redirect the user
    switch (codeEntered) {
        case "000":
            location.href = "index.html";
            break;
        case "123":
            location.href = "login.html";
            break;
        default:
            alert("Bad code");
    }
});

＆＃13;

<form id="form_id" method="post" name="myform">
<label>Code :</label>
<input type="password" name="password" id="password">
<button type="button" id="login">Login</button>
</form>

＆＃13;

一些注意事项：

这并不需要表单，因为按钮点击事件处理程序将启动下一个操作
不要将输入用于按钮，它在语义上不正确
不要在没有结束标记的标签上使用斜杠
避免 onclick 属性，最好使用JavaScript将事件附加到元素
任何人都可以阅读JavaScript并绕过它以转到他们想要的页面，而无需输入代码

如果您想使用PHP来处理代码，您应该像这样更改HTML：

<form method="post" action="auth.php">
<label>Code :</label>
<input type="password" name="password">
<button type="submit">Login</button>
</form>

如果要使用PHP，则应删除与登录代码相关的所有JavaScript。另请注意，所有 id 属性都已从HTML中删除，因为如果您未在这些元素上使用JavaScript，则不需要它们。 ID 未发送到服务器，只有名称。按钮类型也改为提交。

在 auth.php 中，代码为：

<?php
$code = $_POST['code'];
// For each different code, use header("Location: ...") to redirect the user
switch ($code) {
    case "000":
        header("Location: index.html");
        break;
    case "123":
        header("Location: login.html");
        break;
    default:
        echo "Bad code";
}

使用PHP保护代码，人们无法轻松访问PHP代码。

如果您要创建登录系统，则需要记住已登录的用户，以便限制对页面的访问。最常见的方法是使用会话变量。

添加将会话变量设置为 auth.php ...

的代码

<?php
session_start();
$code = trim($_POST['code']);
// For each different code, use header("Location: ...") to redirect the user
switch ($code) {
    case "000": 
        $_SESSION['code'] = $code;       
        header("Location: index.php");
        break;
    case "123":
        $_SESSION['code'] = $code;
        header("Location: login.php");
        break;
    default:
        echo "Bad code";
}

在 index.php 和 login.php 中，您可以像这样引用会话变量：

<?php
session_start();
if ($_SESSION['code'] === '000') {
    // Do stuff
} else {
    // Force the user to login again
}

请务必使用 .php 扩展程序让PHP运行该文件。

仔细选择文件名。 index.php 通常是网站访问者遇到的第一页。如果需要身份验证，则该页面通常命名为 login.php 。对于您的代码， index.php 可能会提供指向 login.php 的链接，然后在用户登录后可能会以不同的方式运行。在此答案的代码中， auth.php 正在确定代码是否可接受，然后将用户路由到正确的页面。

Answer 2

实际发生的是，表单中提交按钮的点击操作的默认设置是将您带到重定向网址，即此页面本身，因为您还没有提到操作属性。

要做到这一点，当您不希望用户登录时，您必须从验证功能返回false。

从点击功能返回false将确保不执行默认的点击操作处理。

Answer 3

您可以使用jQuery来完成此操作，只需删除onclick =＆＃34; validation（）＆＃34;

login.js

    $(function () {

    $('body').on('click', '#submit', function () {
        var password = $("#password").val();
        if (password == "1234" || password == "0000" || password == "4444") {
            alert("Login successfully");
        }

    })
})

或者

    function validate() {

    var password = document.getElementById("password").value;
    console.log(password);
    if (password == "1234" ||
        password == "0000"  ||
        password == "4444"
    ) {
        alert("Login successfully");
    }
    return false;
}

在JSFiddle上查看这个 https://jsfiddle.net/61pL5bLf/13/

Answer 4

也许你正在使用php解决方案：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if ($_POST['password'] == '000') {
        header('Location: ' . 'login.html');
        exit;
    }
    if ($_POST['password'] == '123') {
        header('Location: ' . 'index.html');
        exit;
    }
}
?>

html和javascript在文本框中验证密码

4 个答案: