注册登录二合一之bootstrap

来源

https://bootsnipp.com/snippets/featured/login-and-register-tabbed-form

jquery插件

需导入bootstrap插件

这个实现真实的功能的话，用ajax最好，避免注册刷新的时候，回到默认的登录，导致问题

HTML页面

{% extends 'base.html' %}
{% load staticfiles %}

{% block login_register %}
<link rel="stylesheet" href="{% static 'login/my_login.css' %}">
{#    <title>login</title>#}
    <style>
        .btn-login {
            background-color: #59B2E6;
        }

        .btn-register {
            background-color: #1CB94A;
        }
    </style>

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-login">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-6">
                                <a href="#" class="active" id="login-form-link">Login</a>
                            </div>
                            <div class="col-xs-6">
                                <a href="#" id="register-form-link">Register</a>
                            </div>
                        </div>
                        <hr>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <form id="login-form" action="/login/" method="post"
                                      role="form"
                                      style="display: block;">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        <input type="text" name="username" id="username" tabindex="1"
                                               class="form-control"
                                               placeholder="Username">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" name="password" id="password" tabindex="2"
                                               class="form-control" placeholder="Password">
                                    </div>
                                    <span>{{ mgs }}</span>
                                    <div class="form-group text-center">
                                        <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                                        <label for="remember"> Remember Me</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6 col-sm-offset-3">
                                                <input type="submit" name="login-submit" id="login-submit" tabindex="4"
                                                       class="form-control btn btn-login" value="Log In">{{ msg }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="text-center">
                                                    <a href="https://phpoll.com/recover" tabindex="5"
                                                       class="forgot-password">Forgot Password?</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <form id="register-form" action="/" method="post"
                                role="form" style="display: none;">
                                <div class="form-group">
                                    <input type="text" name="user" id="users" tabindex="1"
                                           class="form-control"
                                           placeholder="Username" >{{ msg }}
                                </div>
                                <div class="form-group">
                                    <input type="email" name="email" id="email_A" tabindex="1" class="form-control"
                                           placeholder="Email Address">{{ msg }}
                                </div>
                                <div class="form-group">
                                    <input type="password" name="password" id="pwd" tabindex="2"
                                           class="form-control" placeholder="Password">
                                </div>
                                <div class="form-group">
                                    <input type="password" name="c_pwd" id="cpassword"
                                           tabindex="2"
                                           class="form-control" placeholder="Confirm Password">{{ msg }}
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-6 col-sm-offset-3">
                                            <input type="button" name="register-submit" id="register-submit"
                                                   tabindex="4" class="form-control btn btn-register" onclick="btn()";
                                                   value="Register Now">{{ msgs }}
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{% static 'jquery-3.2.1.js' %}" type="text/javascript"></script>
    {#<script src="{% static 'dist/js/bootstrap.min.js' %}" type="text/javascript"></script>#}
    <script src="{% static 'dist/js/bootstrap.js' %}" type="text/javascript"></script>

    <script>

        $(function () {

            $('#login-form-link').click(function (e) {
                $("#login-form").delay(100).fadeIn(100);
                $("#register-form").fadeOut(100);
                $('#register-form-link').removeClass('active');
                $(this).addClass('active');
                e.preventDefault();
            });
            $('#register-form-link').click(function (e) {
                $("#register-form").delay(100).fadeIn(100);
                $("#login-form").fadeOut(100);
                $('#login-form-link').removeClass('active');
                $(this).addClass('active');
                e.preventDefault();
            });

        });
{#        $("#register-submit").click(function () {#}

             function btn() {
              var user = $('#users').val();
              var pwd = $('#pwd').val();
              var email = $('#email_A').val();
              var c_pwd = $('#cpassword').val();
               console.log(user, pwd, email, c_pwd);
            $.ajax({
                url: '/register/',
                type: "POST",
                dataType:"JSON",
                data: {user: user, pwd: pwd, email: email, c_pwd: c_pwd},
                success: function (arg) {
                    if(arg.status){
                       window.location.href='/login/'
                    }else{
                        alert(arg.msg)
                    }
                }
            });
        }
    </script>
{% endblock %}

HTML页面

css页面

body {
    padding-top: 90px;
}

.panel-login {
    border-color: #ccc;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
}

.panel-login > .panel-heading {
    color: #00415d;
    background-color: #fff;
    border-color: #fff;
    text-align: center;
}

.panel-login > .panel-heading a {
    text-decoration: none;
    color: #666;
    font-weight: bold;
    font-size: 15px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.panel-login > .panel-heading a.active {
    color: #029f5b;
    font-size: 18px;
}

.panel-login > .panel-heading hr {
    margin-top: 10px;
    margin-bottom: 0px;
    clear: both;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

.panel-login input[type="text"], .panel-login input[type="email"], .panel-login input[type="password"] {
    height: 45px;
    border: 1px solid #ddd;
    font-size: 16px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.panel-login input:hover,
.panel-login input:focus {
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: #ccc;
}

.btn-login {
    background-color: #59B2E0;
    outline: none;
    color: #fff;
    font-size: 14px;
    height: auto;
    font-weight: normal;
    padding: 14px 0;
    text-transform: uppercase;
    border-color: #59B2E6;
}

.btn-login:hover,
.btn-login:focus {
    color: #fff;
    background-color: #53A3CD;
    border-color: #53A3CD;
}

.forgot-password {
    text-decoration: underline;
    color: #888;
}

.forgot-password:hover,
.forgot-password:focus {
    text-decoration: underline;
    color: #666;
}

.btn-register {
    background-color: #1CB94E;
    outline: none;
    color: #fff;
    font-size: 14px;
    height: auto;
    font-weight: normal;
    padding: 14px 0;
    text-transform: uppercase;
    border-color: #1CB94A;
}

.btn-register:hover,
.btn-register:focus {
    color: #fff;
    background-color: #1CA347;
    border-color: #1CA347;
}

css样式