发送短信验证码 

 1 <input id="sendBtn" type="button" value="点击获取验证码" class="btn btn-default"/>
 2 <button type="button" class="btn btn-primary" id="loginBtn">登 录</button>
 3 
 4 <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
 5 <script src="{% static 'js/csrf.js' %}"></script>
 6 <script>
 7     $(function () {
 8         // 当页面框架加载完成之后，自动执行里面的代码。
 9         bindSendSmsEvent();
10 
11         bindLoginEvent();
12     })
13 
14     function bindLoginEvent() {
15         $("#loginBtn").click(function () {
16             // 清楚所有的错误
17             $(".error-message").empty();
18 
19             $.ajax({
20                 url: "{% url 'sms_login' %}",
21                 type: "POST",
22                 data: $("#smsForm").serialize(),
23                 dataType: "JSON",
24                 success: function (res) {
25                     console.log(res);
26                     if (res.status) {
27                         // res.data = "/level/list/
28                         location.href = res.data;
29                     } else {
30                         $.each(res.detail, function (k, v) {
31                             $("#id_" + k).next().text(v[0]);
32                         })
33                     }
34                 }
35             })
36         });
37     }
38 
39     function bindSendSmsEvent() {
40         // 按钮绑定点击事件
41         $("#sendBtn").click(function () {
42             // 1.获取手机号， 向后台发送请求【先不写】
43 
44             // 清楚所有的错误
45             $(".error-message").empty();
46 
47             $.ajax({
48                 url: "{% url 'sms_send' %}",
49                 type: "POST",
50                 data: {
51                     mobile: $("#id_mobile").val(),
52                     role: $("#id_role").val(),
53                 },
54                 dataType: "JSON",
55                 success: function (res) {
56                     console.log(res);
57                     if (res.status) {
58                         // 2.动态效果
59                         sendSmsRemind();
60                     } else {
61                         // {"status": false, "detail": {"mobile": ["手机格式错误"],"role":["xxxxx",]}}
62                         // {"status": false, "detail": {"id_mobile": ["手机格式错误"],"role":["xxxxx",]}}
63                         $.each(res.detail, function (k, v) {
64                             $("#id_" + k).next().text(v[0]);
65                         })
66                     }
67                 }
68             })
69 
70         });
71     }
72 
73     /**
74      * 发送短信按钮倒计时效果
75      */
76     function sendSmsRemind() {
77         var $smsBtn = $("#sendBtn");
78         // 2.1 禁用
79         $smsBtn.prop("disabled", true);
80 
81         // 2.2 改内容
82         var time = 60;
83         var remind = setInterval(function () {
84             $smsBtn.val(time + "秒重新发送");
85             time = time - 1;
86             if (time < 1) {
87                 clearInterval(remind);
88 
89                 $smsBtn.val("点击获取验证码");
90                 $smsBtn.prop("disabled", false);
91             }
92         }, 1000);
93     }
94 
95 
96 </script>

 

posted @ 2022-12-07 15:37  .Prometheus  阅读(107)  评论(0)    收藏  举报