效果展示

圖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 = 'smtp.qq.com'# 服務器名稱 EMAIL_PORT = 25# 服務端口 EMAIL_HOST_USER = '14589@139.com' # 填寫自己郵箱 EMAIL_HOST_PASSWORD = 'dpbvxyovdsnmbaae'# 在郵箱中設置的客戶端授權密碼 EMAIL_FROM = '董*'# 收件人看到的發件人 DEFAULT_FROM_EMAIL = EMAIL_HOST_USER EMAIL_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, '****@139.com', 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),

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。