输入账号密码实现登录功能

当实现用户的账户和密码输入正确之后，页面跳转跳转使用window.loacation.href ="网址"，

这个时候那个登录的地方有个账号和密码这个是怎么做到的呢？

现在有个方法是：

在输入账号和密码的时候，当账号和密码都正确的时候，把这个两个值都存在本地，然后转到登录进去的页面的时候，

再在本地的缓存里面取到这2个值，即可。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #top{
            width:100%;
            height:40px;
            background-color:black;
            text-align:right;
            font-size:14px;
        }
        #top a{
            color:white;
            text-decoration:none;
            line-height:40px;
            vertical-align:middle;
            margin-right:40px;
          }
        #login{
            display:none;
            margin-left:40px;
        }
        #login a{
            display:block;
            width:300px;
            height:40px;
            background-color:firebrick;
            line-height:40px;
            vertical-align: middle;
            color:white;
            text-decoration:none;
            text-align:center;
 
 
        }
        input{
            width:300px;
            height:40px;
            font-size:14px;
 
        }
        #login .name,.password,.bu{
           margin-lfet:20px;
            margin-top:15px;
        }
        a{
            cursor:pointer;
        }
    </style>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="layer/layer.js"></script>
    <script>
        function showLogin(){
            layer.open({
                type:1,//type为1表示弹出的是div
                title:'登陆',
                area:['395px','300px'],
                content:$('#login')
            });
        }
        function login(){
            var userName= $.trim($(".userName").val());//trim用于去掉空格
            var password= $.trim($(".password").val());
            if(userName==" "||password==" "){
                layer.alert("用户名或密码不能为空",{
                 title:'提示',
                 icon:5
            });
            }else{
                //输入用户名和密码不为空
                //ajax,第一个是传到的后台页面，第二个参数是用户名密码，第三个参数是从后台获取的数据
                $.post("/后台页面",{"userName":userName,"password":password},function(data){
     
                 //这个地方使用的是layer的弹出框 ，
                    不使用就可以直接跳转到相应的页面   在此之前，可以把2个值存到本地  即用户名和密码  
                    window.location.href = "网址" 
                     if(data=="登陆成功"){
                         layer.alert("登陆成功",{
                             title:'提示',
                             icon:6
                         });
                     }else{

                         这个地方可以用到在输入框下面把用户名或者密码错误显示出来 
                         当然这个地方可以用到正则，提示输入的密码符合怎么规则，账号是什么规则等等 。

                         layer.alert("用户名或密码出错",{
                             title:'提示',
                             icon:5
                         });
                     }
                });
            }
        }
    </script>
</head>
<body>
<div id="top">
    <a id="reg">注册</a>
    <a id="log" onclick="showLogin()">登陆</a>
</div>
<!--sql注入，利用SQL语句的漏洞来攻击数据库-->
<div id="login">
    <div class="name">
     <input type="text" class="userName" placeholder="请输入用户名">
    </div>
    <div class="password">
     <input type="password" class="password" placeholder="请输入密码">
    </div>
    <div class="bu"><a onclick="login()">登陆</a></div>
</div>
 
</body>
 
</html>

输入账号 密码 实现登录功能

猜你喜欢

输入账号密码实现登录功能