django 通过ajax完成邮箱用户注册、激活账号的方法

一、图片验证码

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>   ......