效果展示

图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使用邮箱发送验证码相关推荐

django qq邮箱发送验证码
1. qq邮箱授权 2.settings配置 EMAIL_HOST = 'smtp.qq.com' EMAIL_PORT = 25 #发件箱的smtp服务器端口 EMAIL_HOST_USER = ' ...
超详细教程-Django实现Ajax局部刷新
效果展示: 右侧div块展示博客详情右侧div块展示新建博客右侧div块展示新建博客实现逻辑: 在一个DIV块展示不同的功能模块(查看博客,编辑博客,新建博客) 前端发起Ajax请求后端使用r ...
极验验证码破解—超详细教程（一）
极验验证码破解-超详细教程(一) Gayhub:FanhuaandLuomu/geetest_break 2017.8.21 代码以上传,可供参考目录一.网站http://www.gsxt.gov ...
极验验证码破解—超详细教程（三）
极验验证码破解-超详细教程(三) Gayhub:FanhuaandLuomu/geetest_brek [国家企业信用信息公示系统为例] 目录一.网站http://www.gsxt.gov.cn滑动 ...
极验验证码破解—超详细教程（二）
极验验证码破解-超详细教程(二) Gayhub:FanhuaandLuomu/geetest_break 2017.8.21 代码以上传,可供参考 [国家企业信用信息公示系统为例] 目录一.网站ht ...
手把手带你入门前端工程化——超详细教程（高级前端必备）
本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...
手把手带你入门前端工程化——超详细教程
授权自@谭光志链接:https://segmentfault.com/a/1190000037752931,也可点击阅读原文本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能 ...
18年10月份最新免费申请微软OneDrive5TB云盘超详细教程！（已亲测！）
18年10月份最新免费申请微软OneDrive5TB云盘超详细教程!(已亲测!) 本人已于今天10月23日亲测,成功获取微软OneDrive5T云盘! 第一步:.打开申请链接学生版:https:// ...
最新免费申请微软OneDrive5TB云盘超详细教程！（已亲测！）
https://www.cnblogs.com/wangyunfei/p/9836580.html 18年10月份最新免费申请微软OneDrive5TB云盘超详细教程!(已亲测!) 本人已于今天10月 ...

超详细教程-Django使用邮箱发送验证码

效果展示

实现逻辑：

相关代码

超详细教程-Django使用邮箱发送验证码相关推荐

最新文章

热门文章