1.更新配置views.py
# _*_ encoding:utf-8 _*_
__author__ = 'luky'
__date__ = '2018/4/12 15:46'
from django.shortcuts import render
from django.contrib.auth import authenticate, login
#1自定義登陸的字段，用戶名或者email都行
from django.contrib.auth.backends import ModelBackend
from django.db.models import Q
from django.views.generic.base import View
# Create your views here.
from .models import UserProfile
from.forms import LoginForm
class CustomBackend(ModelBackend):
def authenticate(self, username=None, password=None, **kwargs):
try:
user = UserProfile.objects.get(Q(username=username)|Q(email=username))
if user.check_password(password):
return user
except Exception as e:
return None
class LoginView(View):
def get(self, request):
return render(request, "login.html", {})
def post(self, request):
# 增加form組件對(duì)用戶提交的表單進(jìn)行預(yù)處理，驗(yàn)證參數(shù)是否正確
login_form = LoginForm(request.POST)
if login_form.is_valid():
user_name = request.POST.get("username", "")
pass_word = request.POST.get("password", "")
user = authenticate(username=user_name, password=pass_word)
if user is not None:
login(request, user)
return render(request, "index.html")
#更新部分1
else:
# 2{"msg":"用戶名密碼輸入錯(cuò)誤！"}定義數(shù)據(jù)庫查詢后驗(yàn)證的報(bào)錯(cuò)輸。在login.html代碼中加入
return render(request, "login.html", {"msg": "用戶名密碼輸入錯(cuò)誤！"})
#更新部分1
else:
#更新部分2
#3{"login_form":login_form}定義form驗(yàn)證報(bào)錯(cuò)輸。在login.html代碼中加入
return render(request, "login.html", {"login_form":login_form})
#更新部分2
2.更新login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<title>慕學(xué)在線網(wǎng)登錄</title>
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/css/login.css">
</head>
<body>
<div class="dialog" id="jsDialog">
<!--提示彈出框-->
<div class="successbox dialogbox" id="jsSuccessTips">
<h1>成功提交</h1>
<div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
<div class="cont">
<h2>您的需求提交成功！</h2>
<p></p>
</div>
</div>
<div class="noactivebox dialogbox" id="jsUnactiveForm" >
<h1>郵件驗(yàn)證提示</h1>
<div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
<div class="center">
<img src="/static/images/send.png"/>
<p>我們已經(jīng)向您的郵箱<span class="green" id="jsEmailToActive">12@13.com</span>發(fā)送了郵件，<br/>為保證您的賬號(hào)安全，請(qǐng)及時(shí)驗(yàn)證郵箱</p>
<p class="a"><a class="btn" id="jsGoToEmail" target="_blank" >去郵箱驗(yàn)證</a></p>
<p class="zy_success upmove"></p>
<p style="display: none;" class="sendE2">沒收到，您可以查看您的垃圾郵件和被過濾郵件，也可以再次發(fā)送驗(yàn)證郵件（<span class="c5c">60s</span>）</p>
<p class="sendE">沒收到，您可以查看您的垃圾郵件和被過濾郵件，<br/>也可以<span class="c5c green" id="jsSenEmailAgin" style="cursor: pointer;">再次發(fā)送驗(yàn)證郵件</span></p>
</div>
</div>
</div>
<div class="bg" id="dialogBg"></div>
<header>
<div class="c-box fff-box">
<div class="wp header-box">
<p class="fl hd-tips">慕學(xué)在線網(wǎng)，在線學(xué)習(xí)平臺(tái)！</p>
<ul class="fr hd-bar">
<li>服務(wù)電話：<span>33333333</span></li>
<li class="active"><a href="login.html">[登錄]</a></li>
<li><a href="register.html">[注冊(cè)]</a></li>
</ul>
</div>
</div>
</header>
<section>
<div class="c-box bg-box">
<div class="login-box clearfix">
<div class="hd-login clearfix">
<a class="index-logo" href="index.html"></a>
<h1>用戶登錄</h1>
<a class="index-font" href="index.html">回到首頁</a>
</div>
<div class="fl slide">
<div class="imgslide">
<ul class="imgs">
<li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg" /></a></li>
<li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg" /></a></li>
<li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg" /></a></li>
</ul>
</div>
<div class="unslider-arrow prev"></div>
<div class="unslider-arrow next"></div>
</div>
<div class="fl form-box">
<h2>帳號(hào)登錄</h2>
<form action="/login/" method="post" autocomplete="off">
<input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' />
{#更新部分1：{% if login_form.errors.username %}errorput{% endif %}增加用戶名驗(yàn)證錯(cuò)誤信息 #}
<div class="form-group marb20 {% if login_form.errors.username %}errorput{% endif %}">
<label>用 戶 名</label>
<input name="username" id="account_l" type="text" placeholder="手機(jī)號(hào)/郵箱" />
</div>
{#更新部分2：{% if login_form.errors.password %}errorput{% endif %}增加密碼驗(yàn)證錯(cuò)誤信息 #}
<div class="form-group marb8 {% if login_form.errors.password %}errorput{% endif %}">
<label>密 碼</label>
<input name="password" id="password_l" type="password" placeholder="請(qǐng)輸入您的密碼" />
</div>
{#更新部分3：for循環(huán)，將所有錯(cuò)誤信息輸出在控件下面 #}
<div class="error btns login-form-tips" id="jsLoginTips">{% for key,error in login_form.errors.items %}{{ error }}{% endfor %}{{ msg }}</div>
<div class="auto-box marb38">
<a class="fr" href="forgetpwd.html">忘記密碼？</a>
</div>
<input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登錄 > " />
<input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' />
{% csrf_token %}
</form>
<p class="form-p">沒有慕學(xué)在線網(wǎng)帳號(hào)？<a href="register.html">[立即注冊(cè)]</a></p>
</div>
</div>
</div>
</section>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/unslider.js" type="text/javascript"></script>
<script src="/static/js/login.js" type="text/javascript"></script>
</body>
</html>
3.驗(yàn)證
用戶名密碼為空
image.png
密碼輸入小于5個(gè)字符
image.png
