Django實現帶驗證碼登錄功能
_______________________________________________________________________
第一步安裝：
pip install django-simple-captcha
sudo apt-get -y install libz-dev libjpeg-dev libfreetype6-dev python-dev
pip install PIL
pip install Pillow
第二步加載app:
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'authpermission',
'DjangoUeditor',
'app02',
'captcha', # 驗證碼
)
第三步同步數據庫:
python manage.py migrate
第四步添加項目主url:
urlpatterns = [
url(r'^captcha/', include('captcha.urls')),
]
第五步定義表單增加驗證碼字段：
from django import forms
from captcha.fields import CaptchaField
class RegisterForm(forms.Form):
"""
註冊表單
"""
username = forms.EmailField(
widget=forms.TextInput(
attrs={
"class": "form-control",
"placeholder": "請輸入郵箱賬號",
"value": "",
"required": "required"
}
),
max_length=50,
error_messages={"required": "用戶名不能爲空", }
)
password = forms.CharField(
widget=forms.PasswordInput(
attrs={
"class": "form-control",
"placeholder": "請輸入密碼",
"value": "",
"required": "required"
}
),
min_length=8,
max_length=50,
error_messages={"required": "密碼不能爲空", }
)
# 驗證碼
captcha = CaptchaField()
第六步在視圖函數(views)中驗證表單:
def some_view(request):
if request.POST:
form = CaptchaTestForm(request.POST)
# Validate the form: the captcha field will automatically
# check the input
if form.is_valid():
human = True
else:
registerform = RegisterForm()
return render(
request, "register.html",
{"registerform": registerform})
第七步驟html頁面展示:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'js/register.js' %}"></script>
</head>
<body>
<div class="cls-content">
<div class="cls-content-sm panel">
<p class="pad-btm">Sign In to your account</p>
{{ registerform }}
<br><br>
<input type="submit" name="submit" id="" value="註冊">
</div>
</div>
</body>
</html>
第八步使用js動態刷新驗證碼:
$(document).ready(function () {
$(".captcha").click(function () {
$.ajax({
url: '/captcha/refresh/',
type: 'GET',
success: function (result) {
$(".captcha").attr('src', result["image_url"]);
$("#id_captcha_0").val(result["key"])
}
})
});
});
附加：一個挺詳細的django-simple-captcha文檔
https://django-simple-captcha.readthedocs.io/en/latest/usage.html
注意：以上內容是個人使用的隨手記錄， 就是介紹了下簡單的使用
歡迎大家來吐槽，準備好瓜子飲料礦泉水，開整!!!
---------------------------------------------------------------------------------------
搞笑一則：能動手儘量別吵吵