zoukankan      html  css  js  c++  java
  • 输入账号 密码 实现登录功能

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

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

    现在有个方法是:

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

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

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #top{
                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;
                300px;
                height:40px;
                background-color:firebrick;
                line-height:40px;
                vertical-align: middle;
                color:white;
                text-decoration:none;
                text-align:center;
     
     
            }
            input{
                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>

      

  • 相关阅读:
    视图、触发器、事物、存储过程、函数、流程控制
    pymysql
    单表查询与多表查询
    多线程学习(第三天)线程间通信
    多线程学习(第二天)Java内存模型
    多线程学习(第一天)java语言的线程
    springboot集成es7(基于high level client)
    elasticSearch(六)--全文搜索
    elasticSearch(五)--排序
    elasticSearch(四)--结构化查询
  • 原文地址:https://www.cnblogs.com/agansj/p/10771829.html
Copyright © 2011-2022 走看看