javascript - html和javascript验证文本框中的密码

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()"/>

登录.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

这样就可以了

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");
    }
});

<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>

一些注意事项:

• 这实际上并不需要表单，因为按钮单击事件处理程序将启动下一个操作
• 不要使用按钮的输入，它在语义上不正确
• 不要在没有结束标记的标记上使用斜杠
• 避免使用 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 不会发送到服务器，只有 name 会发送到服务器。 按钮类型也更改为提交。

在 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代码。

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

添加将 session 变量设置为 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 中，您可以像这样引用 session 变量:

<?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 正在确定代码是否可接受，然后将用户路由到正确的页面。