效果展示

圖1
圖2

圖3
圖4

實(shí)現(xiàn)邏輯：

• 前端驗(yàn)證郵箱輸入框內(nèi)是否是郵箱地址 （若不是 彈出提示框，否則下一步)
• 后端獲取郵箱地址，生成驗(yàn)證碼發(fā)送至對應(yīng)郵箱， （若發(fā)送失敗 彈出提示框，否則下一步)
• 獲取驗(yàn)證碼按鈕開始倒計(jì)時 ，無法點(diǎn)擊，等待用戶輸入

相關(guān)代碼

• 前端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">驗(yàn)證碼:</label><div class="col-md-4"><div class="input-group"><input type="text" name="vertify" id="vertify" class="form-control" placeholder="請輸入校驗(yàn)碼"><span class="input-group-btn"><input type="button" id="sendEmail" class="btn btn-default" value="獲取驗(yàn)證碼"></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>

• 前端郵箱驗(yàn)證js代碼：

  //展現(xiàn)顯現(xiàn)錯誤提示信息function showError(message) {document.getElementById("messBox").style.display="block";$("#errorMess").html(message);//修改span標(biāo)簽內(nèi)容setTimeout("hidden()",2000);}//隱藏錯誤提示信息function hidden() {document.getElementById("messBox").style.display="none";}//郵箱驗(yàn)證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)) {//驗(yàn)證郵箱格式showError('郵箱格式不正確，請重輸');}else{//按鈕不可再次點(diǎn)擊，開始倒計(jì)時$.ajax({url:"/member/reg",type:"post",data:{type:'sendMessage',csrfmiddlewaretoken:'{{ csrf_token }}',email:email},dataType :"json",success:function (reg) {// 短信發(fā)送失敗if(!reg.state){showError(reg.errmsg);}else{console.log(reg.state);settime();//短信發(fā)送成功，倒計(jì)時}}});var btn_sendEmail = $("#sendEmail");var countdown=60;function settime() {if (countdown === 0) {btn_sendEmail.attr("disabled",false);btn_sendEmail.val("獲取驗(yàn)證碼");return false;} else {btn_sendEmail.attr("disabled", true);btn_sendEmail.val("重新發(fā)送(" + countdown + ")");countdown--;}setTimeout(function() {settime();},1000);}}});

• 發(fā)送郵件setting配置

#郵件相關(guān)配置 EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'# 發(fā)送郵件配置 EMAIL_HOST = 'smtp.qq.com'# 服務(wù)器名稱 EMAIL_PORT = 25# 服務(wù)端口 EMAIL_HOST_USER = '14589@139.com' # 填寫自己郵箱 EMAIL_HOST_PASSWORD = 'dpbvxyovdsnmbaae'# 在郵箱中設(shè)置的客戶端授權(quán)密碼 EMAIL_FROM = '董*'# 收件人看到的發(fā)件人 DEFAULT_FROM_EMAIL = EMAIL_HOST_USER EMAIL_USE_TLS = True #是否使用TLS安全傳輸協(xié)議 #EMAIL_USE_SSL = True #是否使用SSL加密，qq企業(yè)郵箱要求使用

• views文件

def sendMessage(email):#發(fā)送郵件并返回驗(yàn)證碼# 生成驗(yàn)證碼import randomstr1 = '0123456789'rand_str = ''for i in range(0, 6):rand_str += str1[random.randrange(0, len(str1))]# 發(fā)送郵件：# send_mail的參數(shù)分別是 郵件標(biāo)題，郵件內(nèi)容，發(fā)件箱(settings.py中設(shè)置過的那個)，收件箱列表(可以發(fā)送給多個人),失敗靜默(若發(fā)送失敗，報錯提示我們)message = "您的驗(yàn)證碼是" + rand_str + "，10分鐘內(nèi)有效，請盡快填寫"emailBox = []emailBox.append(email)send_mail('怪奇物語', message, '****@139.com', emailBox, fail_silently=False)return rand_str# 驗(yàn)證該用戶是否已存在 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)#發(fā)送郵件request.session['verify'] = rand_str # 驗(yàn)證碼存入session，用于做注冊驗(yàn)證response['state'] = Trueexcept:response['errmsg'] = '驗(yàn)證碼發(fā)送失敗，請檢查郵箱地址'return HttpResponse(json.dumps(response))

• 路由分發(fā)

  path('reg', views.reg),

總結(jié)

以上是生活随笔為你收集整理的超详细教程-Django使用邮箱发送验证码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。