JQ-用户注册用到的图形验证码和短信验证码点击事件

Posted 2020-11-20 tangpg

// 点击切换图形验证码 页面加载完后执行，类似window.onload
$(function () {
    var imgCaptcha = $(".img-captcha");
    imgCaptcha.click(function () {
        imgCaptcha.attr("src", "/account/register/img/captcha"+"?random="+Math.random());
    });
});

// 点击发送短信验证码
$(function () {
   var smsCaptcha=$(‘.short-captcha‘);  // 获取点击的标签
   function send_sms() {
       var telephone = $(‘input[name="telephone"]‘).val();  // 获取input标签name=‘telephone‘，用户输入的手机号码
       $.get({
           ‘url‘: ‘/account/register/sms/captcha/‘,  // 请求url并传data数据给后端（django）request.GET.get("telephone")
           ‘data‘: {"telephone": telephone},
           ‘success‘: function () {
               var count=30;
               smsCaptcha.unbind("click");  // 点击一次后,取消点击事件
               smsCaptcha.addClass("disabled");  // 点击后增加classname,改变样式
               var timer=setInterval(function () {
                    smsCaptcha.text(count);
                    count--;
                    if (count<0){
                        clearInterval(timer);
                        smsCaptcha.removeClass("disabled");
                        smsCaptcha.text("发送短信验证码");
                        // 时间到了，再次绑定点击事件
                        // smsCaptcha.click(send_sms);  // 第二回点击，快速点击能够请求三次，发三条短信？？
                        smsCaptcha.one("click", send_sms)  // 触发一次click事件，每次只发一次短信
                    }
                },1000);
           },
           ‘fail‘: function () {
                alert(‘error‘)
           }
       })
   }
    // smsCaptcha.click(send_sms);  // 第一回，就算连续点击只能点击一次，发一条短信
    smsCaptcha.one("click", send_sms)  // one(event, function), it‘s safe to use this way.
});