html+js实现简单登录校验和登录进入显示用户名

最新推荐文章于 2023-03-28 09:56:20 发布

不将就eee

最新推荐文章于 2023-03-28 09:56:20 发布

阅读量8.4k

点赞数 11

文章标签： html javascript 前端

原文链接：https://blog.csdn.net/weixin_42579348/article/details/110748968?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefaul

版权

这篇博客展示了如何在没有后台的情况下，通过JavaScript实现登录表单的校验。代码包括一个HTML登录页面，当用户输入正确的用户名（'0001'）和密码（'123'）时，会跳转到success.html页面，并在该页面显示欢迎信息。如果输入错误，会弹出警告并阻止页面跳转。success.html页面通过location.search获取URL参数并显示用户名。

摘要由CSDN通过智能技术生成

无需后台，使用js实现简单登录校验和登录进入显示用户名

话不多说，直接上代码！
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/iconfont.css" rel="stylesheet">
    <script src="js/judge.js"></script>
</head>
<body>
<div id="bigBox">
    <form action="success.html">
    <h1>LOGIN</h1>
    <div class="inputBox">
        <div class="inputText">
            <span class="iconfont icon-yonghu"></span>
            <input type="text"  name="uname" placeholder="Username" id="username"/>
        </div>
        <div class="inputText">
            <span class="iconfont icon-mima"></span>
            <input type="password" placeholder="Password" id="password"/>
        </div>
        <input class="inputButton" type="submit" onclick="judge()" value="登录">
    </div>
    </form>
</div>
</body>
</html>

使用form表单的action 通过url将用户名传递到success.html中
js

function judge() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if (username == "0001" && password == "123") {
     window.location.href = "success.html"
    } else {
        alert("用户名或密码错误")
        event.preventDefault();
    }

}

event.preventDefault();方法强制打断action跳转，不加的话即使错误任然跳转。
success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <title>欢迎登入</title>
</head>
<body>
<div id="bigBox">
    <script>
        var div = document.querySelector('div');
        var a =location.search.substr(1);
        var arr = a.split('=');
        div.innerHTML = '欢迎您'+arr[1];
    </script>
</div>
</body>
</html>
</html>

location.search.substr(1)截取？后内容即uname=xxx
a.split(’=’)以=为分界线将uname与xxx存入arr数组中。
实现效果
在这里插入图片描述

不将就eee

关注

11
点赞
踩
62

收藏

觉得还不错? 一键收藏
3
评论
html+js实现简单登录校验和登录进入显示用户名

无需后台，使用js实现简单登录校验和登录进入显示用户名话不多说，直接上代码！index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录页面</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> &l
复制链接

扫一扫