JavaScript - WebAPI - 案例 - location对象 - 验证用户信息跳转网页

最新推荐文章于 2022-05-07 22:18:39 发布

Henry_ww

最新推荐文章于 2022-05-07 22:18:39 发布

阅读量115

点赞数

分类专栏：案例文章标签： html javascript js

本文链接：https://blog.csdn.net/Henry_ID/article/details/119578855

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!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>location对象 - 验证用户信息</title>
    </head>
    <body>
        用户名: <input type="text" name="username" /><br />
        密码: <input type="password" name="password" /><br />
        <button>提交</button>
    </body>
    <script>
        // 需求:用户输入信息,点击提交验证:成功跳转.失败刷新

        document.querySelector("button").onclick = function () {
            // 拿到信息
            let username = document.querySelector('[name="username"]').value;
            let password = document.querySelector('[name="password"]').value;
            // console.log(username, password);

            // 验证:用户名和密码都是admin(不区分大小写)
            if (username.toLowerCase() == "admin" && password.toLowerCase() == "admin") {
                // 对
                alert("验证成功,正在跳转");
                location.assign("www.baidu.cn");
                // location.assign("./05 - BOM - history对象.html");
            } else {
                // 错
                alert("用户名或密码错误,请重新输入");
                location.reload();
            }
        };
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 案例 - location对象 - 验证用户信息跳转网页

<!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" /&gt
复制链接

扫一扫