Django completes mailbox user registration via Ajax

First, picture verification code Django-simple-captcha configuration

1. In the Pycharm, file==== "settings====" project: program name = = = "Projects interpreter====" +==== "Search Django-simple-captcha Select 0.55 or more and install by installing the package button.

2. Add code in Project name/urls.py:

 fromDjango.urlsImportpath,include ... fromUsers.viewsImportIndexview......urlpatterns= [    ......        #Configure Verification CodesPath ('captcha/', Include ('Captcha.urls')),    #Home URLPath"', Indexview.as_view (), name='Index'),    ......]

Add a registration information to the 3.settings.py

Installed_apps = [        ...         ] ' Captcha ' ]

4. Open the terminal terminal execute the update database command:

Python manage.py Makemigrationspython manage.py Migrate

5. Create a new form.py file under the Users directory:

 fromDjangoImportForms fromCaptcha.fieldsImportCaptchafieldclassRegisterform (forms. Form):"""Verification of registration information"""username=forms. Charfield (required=true,error_messages={'Invalid':'the user name is already occupied'}) Email=forms. Emailfield (required=true,error_messages={'Invalid':'Bad mailbox Format'})#mailbox format, and uniquePassword=forms. Charfield (min_length=5,error_messages={'Invalid':'password length cannot be less than 5'})#string format, and length cannot be less than 5Captcha=captchafield (error_messages={'Invalid':'Verification Code Error'})

6. Add code in users/views.py:

 from Import Registerform

class Indexview (View):     """ Home Page """    def Get (self,request):        register_form=registerform ()        return render ( Request,'index.html', {'register_form': Register_form})

7. Display the verification code, the input box in the front page index.html

Html

<Divclass= "Modal Fade"ID= "Register"TabIndex= "-1"role= "Dialog">    ......<!--contents of the modal box about registration start -      <Divclass= "Modal-body">        ......                        <P><Divstyle= "Display:inline-block;width:100px;text-align:center"><b>Verification Code:</b></Div><!--Verification Code Start -            <Divclass= "Cap">{{Register_form.captcha}}</Div><!--Verification Code End -</P>{% Csrf_token%}</form>          <P><Divstyle= "Margin-left:100px;background-color:orangered;width:150px;text-align:center"><b></b></Div></P>      </Div><!--the contents of the modal box about registration end -    ......

Css

<style>    . Cap{        display: inline-block;         Width: 280px;         height: 36px;    }     . Cap img{        float: right;    } </style>

JS is related to refresh verification code (jquery is required first)

$ (function() {        $ ('. Captcha '). css ({        ' cursor ': ' Pointer '    });     /* # ajax Refresh */         $ ('. Captcha '). Click (function() {            console.log (' click ');            $.getjson ("/captcha/refresh/",function(Result) {                $ ('. Captcha '). attr (' src '), result[' Image_url ');                $ (' #id_captcha_0 '). Val (result[' key ')})            ;     })

Second, Ajax mailbox registration

Django completes mailbox user registration via AJAX