javascript判断用户名密码正确验证

原创

mob64ca12d1e6a9 2024-11-30 04:45:11 ©著作权

文章标签 用户名用户登录 html 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d1e6a9的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 判断用户名和密码正确验证的实现

在当今的互联网世界，用户身份验证是至关重要的一环。使用 JavaScript 来进行用户名和密码的验证是一个非常基本的功能。在这篇文章中，我们将一起学习如何实现这个功能。

流程概述

首先，让我们来看看完整的流程。下面是实现用户名和密码验证的步骤：

步骤	描述
1	获取用户输入的用户名和密码
2	定义正确的用户名和密码
3	验证用户输入的用户名和密码是否正确
4	根据验证结果给出相应的提示

步骤详解

步骤 1：获取用户输入的用户名和密码

我们需要创建一个简单的 HTML 表单，让用户能够输入他们的用户名和密码。代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
</head>
<body>

    <h2>用户登录</h2>
    <form id="loginForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" required>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" required>
        <br>
        <button type="submit">登录</button>
    </form>

    <div id="message"></div>

    <script src="script.js"></script>
</body>
</html>

在上述代码中，我们创建了一个简单的 HTML 表单，包含两个输入框（用户名和密码）和一个提交按钮。

步骤 2：定义正确的用户名和密码

在 JavaScript 中，我们需要定义一个正确的用户名和密码。这里我们将假设用户名是 user123，密码是 password123。

我们在 script.js 中这样定义：

// script.js

// 定义正确的用户名和密码
const correctUsername = 'user123'; // 正确的用户名
const correctPassword = 'password123'; // 正确的密码

在这里，我们使用 const 声明了两个变量，分别存储正确的用户名和密码。

步骤 3：验证用户输入的用户名和密码

在表单提交时，我们需要验证用户输入的用户名和密码是否与之前定义的相同。我们可以通过监听表单的 submit 事件实现这一点。

// 监听表单提交事件
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认提交行为

    // 获取用户输入的用户名和密码
    const username = document.getElementById('username').value; 
    const password = document.getElementById('password').value; 

    // 进行验证
    if (username === correctUsername && password === correctPassword) {
        document.getElementById('message').innerText = '登录成功！'; // 验证通过
    } else {
        document.getElementById('message').innerText = '用户名或密码错误！'; // 验证失败
    }
});

在这段代码中，我们首先通过 getElementById 方法获取输入框的值，然后使用 if 语句判断输入的用户名和密码是否正确。根据结果，给出相应的提示信息。

步骤 4：根据验证结果给出相应的提示

在上面的代码块中，我们已经通过 innerText 属性将结果展示在页面上。根据用户输入的情况，我们可以输出“登录成功！”或者“用户名或密码错误！”等提示信息。

完整代码示例

将所有代码集成后，你的 index.html 文件和 script.js 文件应如下所示：

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
</head>
<body>

    <h2>用户登录</h2>
    <form id="loginForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" required>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" required>
        <br>
        <button type="submit">登录</button>
    </form>

    <div id="message"></div>

    <script src="script.js"></script>
</body>
</html>

script.js

// 定义正确的用户名和密码
const correctUsername = 'user123'; // 正确的用户名
const correctPassword = 'password123'; // 正确的密码

// 监听表单提交事件
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认提交行为

    // 获取用户输入的用户名和密码
    const username = document.getElementById('username').value; 
    const password = document.getElementById('password').value; 

    // 进行验证
    if (username === correctUsername && password === correctPassword) {
        document.getElementById('message').innerText = '登录成功！'; // 验证通过
    } else {
        document.getElementById('message').innerText = '用户名或密码错误！'; // 验证失败
    }
});