一、圖片驗證碼

django-simple-captcha配置

1.在pycharm中，File====》Settings====》Project:項目名====》Project Interpreter====》+====》搜django-simple-captcha　　選擇0.55以上版本，然后點install package 按鈕進行安裝

2.項目名/urls.py中添加代碼：

from django.urls import path,include......from users.views import IndexView......urlpatterns = [  ......    #配置驗證碼  path('captcha/',include('captcha.urls')),  #首頁url  path('', IndexView.as_view(), name='index'),  ......]

3.settings.py中添加一個注冊信息

INSTALLED_APPS = [    ......    'captcha']

4.打開終端Terminal執行更新數據庫命令：

python manage.py makemigrationspython manage.py migrate

5.在users目錄下新建form.py文件：

from django import formsfrom captcha.fields import CaptchaField......class RegisterForm(forms.Form):  """注冊信息的驗證"""  ......  captcha=CaptchaField(error_messages={'invalid':'驗證碼錯誤'})  ......

6.在users/views.py中添加代碼：

from users.form import RegisterFormclass IndexView(View):  """首頁"""  def get(self,request):    register_form=RegisterForm()    return render(request,'index.html',{'register_form':register_form})

7.在前端首頁index.html中顯示驗證碼、輸入框

html

<div class="modal fade" id="register" tabindex="-1" role="dialog">  ......<!--模態框中關于注冊的內容start-->   <div class="modal-body">    ......            <P><div style="display: inline-block;width:100px;text-align: center"><b >驗證碼：</b></div><!--驗證碼start-->      <div class="cap">{{ register_form.captcha }}</div><!--驗證碼end--></P>      {% csrf_token %}    </form>     <p><div style="margin-left: 100px;background-color: orangered;width:150px;text-align: center"><b></b></div></p>   </div><!--模態框中關于注冊的內容end-->  ......

css

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

js 跟刷新驗證碼相關（需要先引入jQuery）

$(function(){    $('.captcha').css({    'cursor': 'pointer'  });  /*# ajax 刷新*/    $('.captcha').click(function(){      console.log('click');      $.getJSON("/captcha/refresh/",function(result){        $('.captcha').attr('src', result['image_url']);        $('#id_captcha_0').val(result['key'])      });    });  })

二、ajax郵箱注冊

 1.在前端跟注冊綁定的模態框代碼寫成：

html

<div class="modal fade" id="register" tabindex="-1" role="dialog"> ......      <div class="modal-body">    <form id="registerform" action="#" method="post">      <p>        <div class="re-input"><b>用戶名：</b></div>        <input type="text" name="user" placeholder="用戶名">        <div class="msg"><b id="user-msg"></b></div>      </p>      <p>        <div class="re-input"><b>郵箱：</b></div>        <input type="text" name="email" placeholder="郵箱">        <div class="msg"><b id="email-msg">2222</b></div>      </p>      <p>        <div class="re-input"><b >密碼：</b></div>        <input type="password" name="pwd" placeholder="密碼（不少于6位）">        <div class="msg"><b id="pwd-msg">222</b></div>      </p>      <p>        <div class="re-input"><b >確認密碼：</b></div>        <input type="password" name="pwd2" placeholder="確認密碼">        <div class="msg"><b id="pwd-msg2">22</b></div>      </p>      <P><div class="re-input"><b >驗證碼：</b></div>        <div class="cap">{{ register_form.captcha }}</div>        <div class="msg"><b id="captcha-msg">2</b></div>      </P>      {% csrf_token %}    </form>     <p><div style="margin-left: 100px;color: white;background-color: green;width:180px;text-align: center"><b id="active-msg"></b></div></p>   ......    <button type="button" class="btn btn-primary" id="registerbtn">確認注冊</button>   ......