驗證碼功能

1.安裝captcha插件

(dj_login) D:\dj\dj_login>pip install django-simple-captcha Collecting django-simple-captchaUsing cached https://files.pythonhosted.org/packages/d7/f4/ea95b04ed3abc7bf225716f17e35c5a185f6100db4d7541a 46696ce40351/django-simple-captcha-0.5.9.zip Requirement already satisfied: six>=1.2.0 in e:\venv\dj_login\lib\site-packages (from django-simple-captcha) (1.11.0) Requirement already satisfied: Django>=1.8 in e:\venv\dj_login\lib\site-packages (from django-simple-captcha)(1.11.12) Collecting Pillow!=5.1.0,>=2.2.2 (from django-simple-captcha)Using cached https://files.pythonhosted.org/packages/1b/50/869910cd7110157fbefd0fed3db3656c1951f1bceecdd00e 3716aa269609/Pillow-5.2.0-cp36-cp36m-win_amd64.whl Collecting django-ranged-response==0.2.0 (from django-simple-captcha)Using cached https://files.pythonhosted.org/packages/70/e3/9372fcdca8e9c3205e7979528ccd1a14354a9a24d38efff1 1c1846ff8bf1/django-ranged-response-0.2.0.tar.gz Requirement already satisfied: pytz in e:\venv\dj_login\lib\site-packages (from Django>=1.8->django-simple-captcha) (2018.5) Installing collected packages: Pillow, django-ranged-response, django-simple-captchaRunning setup.py install for django-ranged-response ... doneRunning setup.py install for django-simple-captcha ... done Successfully installed Pillow-5.2.0 django-ranged-response-0.2.0 django-simple-captcha-0.5.9

2.注冊captcha并創建表

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','app_login','xadmin','crispy_forms','captcha' ](dj_login) D:\dj\dj_login>python manage.py migrate Operations to perform:Apply all migrations: admin, app_login, auth, captcha, contenttypes, sessions, xadmin Running migrations:Applying captcha.0001_initial... OK

3.添加路由

from django.conf.urls import url from django.conf.urls import include import xadminurlpatterns = [# path('admin/', admin.site.urls),url('xadmin/',xadmin.site.urls),url(r'',include('app_login.urls')),url(r'^captcha',include('captcha.urls')) ]

4.修改forms.py表單

from django import forms #導入forms模塊 from captcha.fields import CaptchaField #導入驗證碼功能模塊class UserForm(forms.Form): #所有表單類都需要繼承forms.Form''' 定義form子標簽<input>子元素的name屬性變量，這里定義的是name=username和name=password的變量 label就是label標簽，max_length為設置該變量可以輸入的最大字符 widget為設置input的類型，這里的passwordinput為type='password',添加屬性使用attrs={}以字典鍵值對的形式，這里增加了class和placeholder屬性 '''username=forms.CharField(label='用戶名',max_length=128,widget=forms.TextInput(attrs={'class':'form-control','placeholder':'用戶名'}))password=forms.CharField(label='密碼',max_length=512,widget=forms.PasswordInput(attrs={'class':'form-control','placeholder':'密碼'}))captcha=CaptchaField(label='驗證碼') #添加驗證碼表單字段

5.修改login.html文件

{% extends 'base.html' %} <!--繼承base網頁模板內容,可以瀏覽網頁查看效果--> {% load staticfiles %} <!--載入靜態方法，用于加載static中的文件--> {% block title %}登陸{% endblock %} <!--設置title，默認使用base模板中的--> {% block css %}<link href="{% static 'css/login.css'%}" rel="stylesheet" />{% endblock %} <!--使用自定義的css登陸樣式，不用base中的-->{% block content %} <!--該模板語言用于定義主體內容，和模板中的結合使用--><div class="container"><div class="col-md-4 col-md-offset-4"><form class='form-login' action="/login/" method="POST">{% if message %} <!--類似if語句--><div class="alert alert-warning">{{ message }}</div> <!--使用bootstrap的警示傳遞message信息-->{% endif %}{% csrf_token %}<h2 class="text-center">歡迎登錄</h2><div class="form-group">{{ login_form.username.label_tag }}{{ login_form.username}}</div><div class="form-group">{{ login_form.password.label_tag }}{{ login_form.password }}</div><div class="form-group">{{ login_form.captcha.errors }} <!--當驗證碼輸入不正確時顯示-->{{ login_form.captcha.label_tag }} <!--用于表示label的頁面顯示-->{{ login_form.captcha }} <!--用于captcha的input標簽顯示--></div> {# <div class="form-group">#} {# <label for="id_username">用戶名：</label>#} {# <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>#} {# </div>#} {# <div class="form-group">#} {# <label for="id_password">密碼：</label>#} {# <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>#} {# </div>#}<button type="reset" class="btn btn-default pull-left">重置</button><button type="submit" class="btn btn-primary pull-right">提交</button></form></div></div> <!-- /container --> {% endblock %}

6.查看效果

轉載于:https://www.cnblogs.com/endmoon/p/9744746.html

總結

以上是生活随笔為你收集整理的验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。