求实现无数据库的基础HTML登录表单：验证后跳转指定URL

核心实现思路 #

无需数据库，直接在前端定义合法账号密码组合列表，通过极简JavaScript在表单提交时验证输入内容，匹配成功则跳转至目标URL，失败则给出提示，全程无需复杂CSS或后端服务。

完整代码示例 #

<form onsubmit="return validateLogin()">
    <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
    </div>
    <p></p>
    <div>
        <label for="pass">Password:</label>
        <input type="password" id="pass" name="password" minlength="8" required>
    </div>
    <p id="errorMsg" style="color: red; display: none;">用户名或密码错误</p>
    <input type="submit" value="Sign in">
</form>

<script>
// 自定义多组合法账号密码，可随意添加或修改
const validAccounts = [
    { username: "user1", password: "pass123456" },
    { username: "admin", password: "admin876543" },
    { username: "guest", password: "guest112233" }
];

// 设置验证成功后跳转的目标URL
const targetUrl = "https://your-target-page.com";

function validateLogin() {
    const username = document.getElementById("username").value;
    const password = document.getElementById("pass").value;
    const errorMsg = document.getElementById("errorMsg");

    // 检查输入是否匹配任意一组合法账号
    const isValid = validAccounts.some(account => 
        account.username === username && account.password === password
    );

    if (isValid) {
        window.location.href = targetUrl;
        return false; // 阻止表单默认提交行为
    } else {
        errorMsg.style.display = "block";
        return false; // 阻止表单默认提交行为
    }
}
</script>

代码说明 #

• 表单结构：给原有输入元素包裹<form>标签，通过onsubmit事件触发验证函数；给输入框添加required属性确保必填。
• 账号配置：在validAccounts数组中添加任意多组账号密码，直接修改数组内容即可更新合法账号列表。
• 跳转设置：修改targetUrl的值为你需要跳转的页面地址。
• 错误提示：新增的<p>标签用于显示验证失败信息，默认隐藏，验证不通过时自动显示。
• 验证逻辑：用Array.some()快速匹配输入内容与合法账号，逻辑简单直接，满足基础登录需求。

内容的提问来源于stack exchange，提问作者Psychzor