JavaScript 简单登录验证固定账号密码

最新推荐文章于 2023-08-07 18:20:37 发布

与鱼有约

最新推荐文章于 2023-08-07 18:20:37 发布

阅读量1.6k

点赞数 6

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_62273193/article/details/125012116

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
            background: #f1f1f1;

        }

        #errorMsg {
            color: #f00;
        }

        .main {
            width: 500px;
            margin: 100px auto;
            border: 1px #ccc solid;
            display: flex;
            flex-direction: column;
            background: rgb(50, 201, 251);
            color: #f1f1f1;


        }

        .login {
            width: 500px;
            height: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        input {
           
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="login">
            <h2>登录</h2>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
            <input type="password" name="password" id="password" placeholder="请输入密码">
            <input type="submit" id="login" onclick="login()" value="登录">
            <p id="errorMsg"></p>

        </div>
    </div>
</body>

<script>
    function login() {
        var username = document.querySelector('#username').value;
        var password = document.querySelector('#password').value;
        var errorMsg = document.querySelector('#errorMsg');
        console.log(username)
        console.log(password)
        if (username == "" || password == "") {
            errorMsg.innerHTML = '请输出用户名或者密码'
        } else {
            if (username === 'admin' && password === 'admin') {
                window.location.href = "index.html"
            } else {
                errorMsg.innerHTML = '用户名或者密码错误'

            }
        }
    }
</script>

</html>

index.html 代码


<body>
    <h2>登录成功</h2>
</body>

与鱼有约

关注

6
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 简单登录验证固定账号密码

<div class="main"> <form class="login"> <h2>登录</h2> <p id="errorMsg"></p> <input type="text" name="username" id="username" placeholder="请输入用户名"> <...
复制链接

扫一扫