zoukankan      html  css  js  c++  java
  • 登陆——记住密码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
            <meta name="author" content="Coderthemes">
    
            <title>Zebra 基于逻辑块的语音策略编辑平台</title>
            <link rel="shortcut icon" href="../static/images/favicon/favicon.ico" type="image/x-icon">
    
            <link href="../static/css/assetscore.css" rel="stylesheet" type="text/css" />
            <link href="../static/css/components.css" rel="stylesheet" type="text/css" />
            <link href="../static/css/icons.css" rel="stylesheet" type="text/css" />
            <link href="../static/css/pages.css" rel="stylesheet" type="text/css" />
            <link href="../static/css/responsive.css" rel="stylesheet" type="text/css" />
            <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    
            <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
            <![endif]-->
    
            <script src="../static/js/assets/modernizr.min.js"></script>
            
        </head>
        <body onLoad="document.getElementById('username').focus();getCookie();">
    
            <div class="account-pages"></div>
            <div class="clearfix"></div>
            <div class="wrapper-page">
                <div class=" card-box">
                <div class="panel-heading"> 
                    <h3 class="text-center"> 登陆 <strong class="text-custom">Zebra</strong> </h3>
                </div> 
    
    
                <div class="panel-body">
                <div class="col-xs-12" style="display: none;">
                    <h4 id="errorMessage" style="color: red"></h4>
                </div>
                <form class="form-horizontal m-t-20">
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" id="username" placeholder="用户名">
                        </div>
                    </div>
    
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input class="form-control" type="password" id="password" placeholder="密码">
                        </div>
                    </div>
    
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <div class="checkbox checkbox-primary">
                                <input id="checkbox-signup" type="checkbox">
                                <label for="checkbox-signup">
                                    记住密码
                                </label>
                            </div>
                            
                        </div>
                    </div>
                    
                    <div class="form-group text-center m-t-40">
                        <div class="col-xs-12">
                            <button id="login_btn" class="btn btn-primary btn-block text-uppercase waves-effect waves-light" type="button">登陆</button>
                        </div>
                    </div>
    
                    <div class="form-group m-t-30 m-b-0">
                        <div class="col-sm-12">
                            <!-- <a href="recoverpw.html" class="text-dark" disabled='false'><i class="fa fa-lock m-r-5"></i> 忘记密码?</a> -->
                        </div>
                    </div>
                </form> 
                
                </div>   
                </div>                              
                    <div class="row">
                    <div class="col-sm-12 text-center">
                        <!-- <p>还没有账号? <a href="register.html" class="text-primary m-l-5" disabled='false'><b>注册</b></a></p> -->
                            
                        </div>
                </div>
                
            </div>
    
            
            <script>
                var resizefunc = [];
            </script>
    
            <!-- jQuery  -->
            <script src="../static/js/jquery-3.1.0.min.js"></script>
    
    
            <script type="text/javascript">
                $(document).ready(function(){
                    $(document).keyup(function(event){
                        if(event.keyCode == 13){
                            //触发login_btn绑定的submit事件
                            $("#login_btn").trigger("click");
                        }
                    });
                    //点击登陆按钮
                    $("#login_btn").click(doLogin);
                })
                function doLogin(){
                    var username = $("#username").val().toLowerCase();
                    var password = $("#password").val().toLowerCase();
                    var errorflag;
                    // alert(username+","+password);
                    if(username == ''){
                        $("#errorMessage").parent().css("display","block");
                        $("#errorMessage").text("请输入用户名!!");
                        return false;
                    }else if(password == ""){
                        $("#errorMessage").parent().css("display","block");
                        $("#errorMessage").text("请输入密码!!");
                        return false;
                    }
                     //ajax去服务器端校验
                    $.ajax({
                        async:true,//是否异步
                        type:'POST',
                        data:{"username":username,"password":password},
                        dataType:'json',//数据传输格式:json
                        url:'/login/',//请求的action路径
                        error:function(){
                         //请求失败处理函数
                         // alert('请求失败!');
                         window.location.href = "{{ url_for('.error')}}";
                        },
                        success:function(data){
                            // console.log(data)
                            if(data=='fail'){
                                $("#errorMessage").parent().css("display","block");
                                $("#errorMessage").text("用户名或密码错误");
                            }
                            else{
                                window.location.href = "{{ url_for('.home')}}";
                                sessionStorage.strategyNameItem = data;
                                if ($("#checkbox-signup").is(":checked")) {
                                    var signInfo = "username="+username+"%%"+password;
                                    setCookie(signInfo,7);
                                }
                            }
               
                        }
                    });                
                }
                function setCookie(signInfo,exdays){
                  var d = new Date();
                  d.setTime(d.getTime()+(exdays*24*60*60*1000));
                  var expires = "expires="+d.toGMTString();
                  document.cookie = signInfo+ ";" + expires;
                }
                function getCookie(){
                    var nmpsd;
                    var nm;
                    var psd;
                    var cookieString = new String(document.cookie);
                    var cookieHeader = "username=";
                    var beginPosition = cookieString.indexOf(cookieHeader);
                    cookieString = cookieString.substring(beginPosition);
                    var ends = cookieString.indexOf(";");
                    if (ends != -1) {
                        cookieString = cookieString.substring(0, ends);
                    }
                    if (beginPosition > -1) {
                        nmpsd = cookieString.substring(cookieHeader.length);
                        if (nmpsd != "") {
                            beginPosition = nmpsd.indexOf("%%");
                            nm = nmpsd.substring(0, beginPosition);
                            psd = nmpsd.substring(beginPosition + 2);
                            document.getElementById('username').value = nm;
                            document.getElementById('password').value = psd;
                            if (nm != "" && psd != "") {
                                // document.forms[0].checkbox.checked = true;
                                document.getElementById('checkbox-signup').checked = true;
                            }
                        }
                    }
    
                }    
             </script>
        </body>
    </html>

  • 相关阅读:
    WPF多路绑定
    ConfigurationManager
    开发小技巧1——Logger
    C#对json数据的解析
    Process类
    JS获取访客IP+判断归属地+自动跳转
    织梦默认编辑器换成kindEditor实操教程
    linux中添加环境变量(python为例)
    原生javascript实现省市区三级联动
    kali安装火狐浏览器
  • 原文地址:https://www.cnblogs.com/qjykn/p/9358701.html
Copyright © 2011-2022 走看看