djangoform表单使用验证码

8.1.安装captcha

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

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

注册captcha

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

'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
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
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/")
}