js 邮箱, 短信验证, 倒计数

Posted 2021-02-05 sealliu

models

class DxyzInfo(models.Model):
    code = models.CharField(max_length=100,verbose_name=‘验证码‘)
    phone = models.CharField(max_length=11,verbose_name=‘手机号‘)
    atime = models.FloatField(verbose_name=‘发送时间‘)

views

class DxyzView(View):
    ‘‘‘
    post:
        发送验证码
    ‘‘‘
    def post(self,request):
        phone = request.POST.get(‘phone‘)
        obj = DxyzInfo.objects.filter(phone=phone).first()
        if obj:
            if time.time() - obj.atime < 10:
                return JsonResponse({‘fs‘:‘10秒只能发送一次‘})
        code = random.randint(1000,9999)
        #验证码保存数据库,方便校队
        DxyzInfo.objects.create(phone=phone,code=code,atime=time.time())
        return JsonResponse({‘fs‘:1})

html

<div class="nr">
            <div class="nr_01">
                <div class="text">邮箱</div>
                <input type="text" class="input_00 input_01 email" onblur="emailyz(this.value)"/>
                <div class="email_error" style="display: none">邮箱有误!</div>
            </div>
            <div class="nr_01">
                <div class="text">校验码</div>
                <input type="text" class="input_00 input_02"/>
                <input type="button" value="获取校验码" class="input_03 daojishu" onclick="huoqu()">
                <div class="tishi" style="display: none">剩余 <a>60</a> 秒后重新获取校验码</div>
            </div>
            <div class="nr_02">
                <input type="button" value="下一步" class="input_11">
            </div>
        </div>

js

  <script>
    emailbool = false
　　　　//邮箱验证
     function emailyz(tt) {
        if(tt.match(/^([a-zA-Z]|[0-9])(w|-)[email protected][a-zA-Z0-9]+.([a-zA-Z]{2,4})$/)){
                        $(".email_error").hide();
                        emailbool = true
        }else {
            $(‘.email_error‘).show();
            emailbool = false
        }
    }
    var count = 60;
    //邮箱发送后倒计数
    function daojishu(obj) {
        if(count==0){
            obj.attr(‘disabled‘,false)
            obj.val(‘免费获取验证码‘)
            count = 60
        }else{
            obj.attr(‘disabled‘,true)
            obj.val(count+‘秒后可重新获取‘)
            count--
        }
　　　　　　//计时器
        setTimeout(function () {
            daojishu(obj)
        },1000)
    }
   function huoqu() {
        var email = $(‘.email‘).val();
       if (emailbool == true){
           $.post(
　　　　　　　　//ajax后台交互
               ‘/user/emailactive/‘,
               {"email":email},
               function (data) {
                   if (data.yx==1){
                     var obj = $(‘.daojishu‘)
                   daojishu(obj)
                   }else{
                       $(‘.tishi‘).text(data.yx).show()
                   }
               })
       }else {
      $(‘.email_error‘).show();
       }
   }
    </script>

发送邮箱配置settings  qq发送

EMAIL_HOST = ‘smtp.qq.com‘
EMAIL_RORT = 25
EMAIL_HOST_USER = ‘[email protected]‘
EMAIL_HOST_PASSWORD = ‘fnoaawfdnalybabd‘
EMAIL_USE_TLS = False
MEDIL_FROM = ‘[email protected]‘

views

from django.core.mail import send_mail
from day0122 import settings
#发送邮箱验证码
def send_register_email(email):
    email_title = ‘账号激活‘
    email_body = ‘邮箱内容‘
    email = email
    send_status = send_mail(email_title,email_body,settings.MEDIL_FROM,[email])
    if send_status:
        print(‘发送成功‘)