校易网项目--登录功能以及验证码实现源码分享

页面展示效果

路由配置：

url(r"^login/$",views.login,name="login"),#登录

url(r"^getVerifyCode/",views.getVerifyCode,name="getVerifyCode"), # 验证码

前端源码；

 

{% extends "index.html" %}
{% load customtag %}

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}">

{% block page-content %}

   <div id="content" style="background:#f8f8f8;">
    <div class="clearfix">
        <div class="loginBox" style="margin:60px 0;background:#fff  no-repeat right;">
            <div>
                <form class="form-horizontal bv-form" name="login" method="POST" action="/login/" novalidate="novalidate">
                    {% csrf_token %}
                    <h3 style="margin-bottom:25px;  margin-left:260px;" >账号登录</h3>

                     <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">账&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" name="username"  style="width:205px;" data-bv-field="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="passwords" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" name="password"  style="width:205px;" data-bv-field="password">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="passwords" class="col-sm-2 control-label">验证码:</label>
                        <div class="col-sm-10">
                            <div style="float:left;"><input type="text" class="form-control" id="safecode" name="safecode"  style="width:65px;" data-bv-field="safecode" maxlength="4"></div>
                            <div style="float:left; padding-left:5px;"><img src="/getVerifyCode/" alt="" id="safecodeimg"></div>
                            <div style="float:left; height:35px; line-height:35px;cursor:pointer;" ><span id="changecode">换一张</span></div>
                        </div>
                        <p style="color:red; padding-left:220px;">{{err_msg}}{{code_msg}}</p>
                    </div>

                    <div class="form-group" style="margin-left:180px">
                        <div class="col-sm-7">
                            <button  id="login" class="btn btnBg" style="width:220px; cursor:pointer;margin-bottom:10px;">登 录</button>
                        </div>
                    </div>
                  {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

刷新验证码的js源码

// 刷新验证码
$("#changecode").bind("click",function(){
    $("#safecodeimg").attr("src",$("#safecodeimg").attr("src")+Math.random());
});

小歪不易源码都是直接能套用的适合新手
对应的服务端源码请移步下面扫码获取