效果展示
图1
图2
图3
图4
实现逻辑：
前端验证邮箱输入框内是否是邮箱地址 （若不是 弹出提示框，否则下一步)后端获取邮箱地址，生成验证码发送至对应邮箱， （若发送失败 弹出提示框，否则下一步)获取验证码按钮开始倒计时 ，无法点击，等待用户输入相关代码
前端HTML
<form id="form" name="form" class="form-horizontal col-md-offset-3 " style="margin-top:20px" >{% csrf_token %}<div class="form-group"><label for="email" class="col-md-2 control-label">邮箱:</label><div class="col-md-4"><input type="text" name="email" id="email" class="form-control" placeholder="请输入你的邮箱"></div></div><div class="form-group"><label for="vertify" class="col-md-2 control-label">验证码:</label><div class="col-md-4"><div class="input-group"><input type="text" name="vertify" id="vertify" class="form-control" placeholder="请输入校验码"><span class="input-group-btn"><input type="button" id="sendEmail" class="btn btn-default" value="获取验证码"></span></div></div></div><div id="messBox" style="display: none;position: fixed; width: 300px;height: 35px; top:50%; left:40%; z-index:10; border-radius: 10%; background-color:#8c8c8c; color: white; text-align: center; "><span id="errorMess" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);"></span></div>
前端邮箱验证js代码：
//展现显现错误提示信息function showError(message) {document.getElementById("messBox").style.display="block";$("#errorMess").html(message);//修改span标签内容setTimeout("hidden()",2000);}//隐藏错误提示信息function hidden() {document.getElementById("messBox").style.display="none";}//邮箱验证function testEmail(str) {var re = /^\w+@[0-9a-z]+\.[a-z]+$/;return re.test(str);}$("#sendEmail").click(function () {var email = $("#email").val();//获取用户输入邮箱if(email===''||!testEmail(email)) {//验证邮箱格式showError('邮箱格式不正确，请重输');}else{//按钮不可再次点击，开始倒计时$.ajax({url:"/member/reg",type:"post",data:{type:'sendMessage',csrfmiddlewaretoken:'{{ csrf_token }}',email:email},dataType :"json",success:function (reg) {// 短信发送失败if(!reg.state){showError(reg.errmsg);}else{console.log(reg.state);settime();//短信发送成功，倒计时}}});var btn_sendEmail = $("#sendEmail");var countdown=60;function settime() {if (countdown === 0) {btn_sendEmail.attr("disabled",false);btn_sendEmail.val("获取验证码");return false;} else {btn_sendEmail.attr("disabled", true);btn_sendEmail.val("重新发送(" + countdown + ")");countdown--;}setTimeout(function() {settime();},1000);}}});
发送邮件setting配置
#邮件相关配置EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'# 发送邮件配置EMAIL_HOST = ''# 服务器名称EMAIL_PORT = 25# 服务端口EMAIL_HOST_USER = '14589@' # 填写自己邮箱EMAIL_HOST_PASSWORD = 'dpbvxyovdsnmbaae'# 在邮箱中设置的客户端授权密码EMAIL_FROM = '董*'# 收件人看到的发件人DEFAULT_FROM_EMAIL = EMAIL_HOST_USEREMAIL_USE_TLS = True #是否使用TLS安全传输协议#EMAIL_USE_SSL = True #是否使用SSL加密，qq企业邮箱要求使用
views文件
def sendMessage(email):#发送邮件并返回验证码# 生成验证码import randomstr1 = '0123456789'rand_str = ''for i in range(0, 6):rand_str += str1[random.randrange(0, len(str1))]# 发送邮件：# send_mail的参数分别是 邮件标题，邮件内容，发件箱(settings.py中设置过的那个)，收件箱列表(可以发送给多个人),失败静默(若发送失败，报错提示我们)message = "您的验证码是" + rand_str + "，10分钟内有效，请尽快填写"emailBox = []emailBox.append(email)send_mail('怪奇物语', message, '****@', emailBox, fail_silently=False)return rand_str# 验证该用户是否已存在 created = 1 存在def existUser(email):created = 1try:models.Member.objects.get(username=email)except:created = 0return createddef reg(request):if request.POST.get('type') == 'sendMessage':print(request.POST.get('email'))email = request.POST.get('email')response = {"state": False, "errmsg": ""}if existUser(email):response['errmsg'] = '该用户已存在，请登录'else:try:rand_str = sendMessage(email)#发送邮件request.session['verify'] = rand_str # 验证码存入session，用于做注册验证response['state'] = Trueexcept:response['errmsg'] = '验证码发送失败，请检查邮箱地址'return HttpResponse(json.dumps(response))
路由分发
path('reg', views.reg),
