djangoform表单使用验证码

8.1.安装captcha

直接安装：pip install django-simple-captcha

Django自动帮我们安装了相关的依赖库six、olefile和Pillow，其中的Pillow是大名鼎鼎的绘图模块。

注册captcha

在settings中，将‘captcha’注册到app列表里：

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'login',

'captcha',

]

captcha需要在数据库中建立自己的数据表，所以需要执行migrate命令生成数据表：

python manage.py migrate

8.2.添加url路由

根目录下的urls.py文件中增加captcha对应的网址：

1.  
   from django.conf.urls import url
2.  
   from django.conf.urls import include
3.  
   from django.contrib import admin
4.  
   from login import views
5.  
    
6.  
   urlpatterns = [
7.  
   url(r'^admin/', admin.site.urls),
8.  
   url(r'^index/', views.index),
9.  
   url(r'^login/', views.login),
10.  
    url(r'^register/', views.register),
11.  
    url(r'^logout/', views.logout),
12.  
    url(r'^captcha', include('captcha.urls')) # 增加这一行
13.  
    ]

8.3.修改forms.py

如果上面都OK了，就可以直接在我们的forms.py文件中添加CaptchaField了。

1. from django import forms
2. from captcha.fields import CaptchaField
3.  
4. class UserForm(forms.Form):
   1. 　　username = forms.CharField(label="用户名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control'}))
   2. 　　password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'}))
   3. 　　captcha = CaptchaField(label='验证码')

需要提前导入from captcha.fields import CaptchaField，然后就像写普通的form字段一样添加一个captcha字段就可以了！

 8.4.修改login.html

 由于我们前面是手动生成的form表单，所以还要修改一下，添加captcha的相关内容，如下所示：

1. <form class='form-login' action="/login/" method="post">
2. <h2 class="text-center">欢迎登录</h2>
3. <div class="form-group">
4. {{ login_form.username.label_tag }}
5. {{ login_form.username}}
6. </div>
7. <div class="form-group">
8. {{ login_form.password.label_tag }}
9. {{ login_form.password }}
10. </div>
11. <div class="form-group"> 
12. {{ login_form.captcha.errors }}
13. {{ login_form.captcha.label_tag }}
14. {{ login_form.captcha }} 
15. </div>
16. <button type="reset" class="btn btn-default pull-left">重置</button> 
17. <button type="submit" class="btn btn-primary pull-right">提交</button>
18. </form>
19. </div> 
20. </div> <!-- /container --> 
21. {% endblock %}

这里额外增加了一条{{ login_form.captcha.errors }}用于明确指示用户，你的验证码不正确

对于刷新验证码 

修改login.html:

<div class="form-group">
    {{login_form.captcha.label_tag}}<a id="refesh">刷新</a>
    <p>
    {{login_form.captcha}}
    {{login_form.captcha.errors}}</p>

</div>

JS:

  //验证码动态刷新实现
$('#refesh').click(function () {
    $.getJSON("/captcha/refresh/", function (result) {
        $('.captcha').attr('src', result['image_url']);
        $('#id_captcha_0').val(result['key'])
    });
});

//后端返回验证失败后的动作
if('{{ status }}' == 'error'){
    alert("验证失败，请重新登录！");
    window.location.assign("/accounts/login/")
}