djangoform form using codes

8.1. Installation captcha

Direct installation: pip install django-simple-captcha

Django automatically help us install the relevant dependent libraries six, olefileand Pillowwhere the Pillow is the famous drawing module.

Registration captcha

In the settings, the 'captcha' registered with the app list:

 

INSTALLED_APPS = [

 

 

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'login',

'captcha',

]

 

captcha need to build their own data table in the database, you need to execute a command to generate migrate data sheet:

python manage.py migrate

8.2. Adding url routing

urls.py file in the root directory of a corresponding increase captcha URL:

from django.conf.urls import url
from django.conf.urls import include
from django.contrib import admin
from login import views

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^login/', views.login),
url(r'^register/', views.register),
url(r'^logout/', views.logout),
URL (R & lt '^ captcha' , the include ( 'captcha.urls' ) ) increases this line #
]

8.3. Modify forms.py

If the above are OK, you can add CaptchaField directly in our forms.py the file.

from django import forms
from captcha.fields import CaptchaField

class UserForm(forms.Form):
　　username = forms.CharField(label="用户名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control'}))
　　password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'}))
　　captcha = CaptchaField (label = 'PIN' )

You need to import in advance from captcha.fields import CaptchaField, then just like writing a normal form field to add a captcha field as on it!

 8.4. Modify login.html

 Since our previous manually-generated form form, therefore it has changed a bit, add relevant content captcha, as follows:

<form class='form-login' action="/login/" method="post">
< H2 class = "text-Center" > Welcome < / 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 }}
{{ login_form.captcha }}
</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 %}

Here a extra {{ login_form.captcha.errors }}for a clear indication of the user, your verification code is incorrect

 

 

For verification code refresh 

Modify 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:

  // refresh achieving dynamic codes 
$ ( '# refesh'). The Click (function () { 
    $ .getJSON ( "/ captcha / Refresh /", function (Result) { 
        $ ( '. Captcha'). Attr ( 'the src ', Result [' image_url ']); 
        $ (' # id_captcha_0 ') Val (Result. [' Key ']) 
    }); 
}); 

// return operation after the rear end of the verification fails 
if (' {{status} } '==' error ') { 
    Alert ( "authentication failed login again!"); 
    window.location.assign ( "/ Accounts / Login /") 
}