短信验证码完成注册功能

JavaScript

 1 //获取手机短信验证码
 2                 $("#smsCaptchaButton").on('click', function () {
 3 
 4                     var btn = $("#smsCaptchaButton");
 5                     //按钮text值
 6                     var oldBtnText = btn.text();
 7                     var mobile =$("#mobile").val();
 8                     var TEL_REGEXP = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
 9                     if(mobile.length>0){
10                         if (TEL_REGEXP.test(mobile)) {
11                             $.ajax({
12                                 type: "POST",
13                                 url: "/sms/sendSmsCaptcha",
14                                 data: {'mobile': mobile},
15                                 dataType: "json",
16                                 success: function () {
17                                     $.bootstrapGrowl("发送成功,请注意查收",{
18                                         type: 'success',
19                                     });
20                                 },
21                                 error: function () {
22                                     $.bootstrapGrowl("发送失败", {
23                                         type: 'danger'
24                                     });
25                                 }
26                             });
27                             //设置计时60秒
28                             var time = 60;
29                             //禁用按钮
30                             btn.attr("disabled", true);
31                             //设置定时器
32                             var btnTimer = null;
33                             btnTimer = setInterval(function () {
34                                 //开始计数
35                                 time--;
36                                 if (time <= 0) {
37                                     btn.removeAttr('disabled');
38                                     btn.text(oldBtnText);
39                                     clearInterval(btnTimer);
40                                 } else {
41                                     btn.text(time + "秒后可再次发送");
42                                 }
43                             }, 1000);
44                         } else {
45                             $.bootstrapGrowl("请输入正确的手机号", {
46                                 type: 'info'
47                             });
48                         }
49                     }else{
50                         $.bootstrapGrowl("请先输入手机号", {
51                             type: 'info'
52                         });
53                     }
54                 });

 

HTML

 1 <div class="form-group">
 2     <label class="col-xs-3 control-label item-required" for="captcha">验证码:</label>
 3     <div class="col-xs-8">
 4         <div class="input-group">
 5             <input id="registerSmsCode" name="registerSmsCode" class="captcha form-control" type="text" maxlength="6" autocomplete="off">
 6             <span class="input-group-btn">
 7                 <button class="btn btn-default" type="button" id="smsCaptchaButton">获取验证码</button>
 8             </span>
 9         </div>
10     </div>
11 </div>

Java

 1     @RequestMapping(value = "/sendSmsCaptcha",method = RequestMethod.POST)
 2     @ResponseBody
 3     public ResponseEntity<?> sendRegisterSms(@RequestParam(value = "mobile") String mobile) {
 4         Map<String, Object> resultMap = new HashMap<>();
 5         try {
 6             //设置同手机号发送限制次数 3次之后不可再发
 7             Long count = stringRedisTemplate.opsForValue().increment("count:"+mobile, 1);
 8             assert count != null;
 9             int smsCount = count.intValue();
10             if (smsCount > 3) {
11                 stringRedisTemplate.expire("count:" + mobile, 12, TimeUnit.HOURS);
12                 resultMap.put("msg", "发送失败,发送次数已用完,请在12小时后再尝试");
13                 return Results.status(HttpStatus.OK, resultMap);
14             } else {
15                 //随机6位数验证码
16                 StringBuilder smsCode = new StringBuilder();
17              Random random = new Random();
18              for (int i = 0; i < 6; i++) {
19                 int r = random.nextInt(10); //每次随机出一个数字(0-9)
20                 smsCode.append(r);  //把每次随机出的数字拼在一起
21              }
22                 String content = "你的验证码为:"+smsCode+",请不要把验证码泄露给其他人!10分钟内有效。 【xxxx】";
23                 smsService.send(mobile, content);
24                 //发送成功之后,将短信写入redis key:mobile  value :smsCode  有效期十分钟
25                 stringRedisTemplate.opsForValue().set(mobile,smsCode,10, TimeUnit.MINUTES);
26                 resultMap.put("msg","操作成功");
27                 return Results.status(HttpStatus.OK, resultMap);
28             }
29         } catch (Exception e) {
30             e.printStackTrace();
31             resultMap.put("msg", "发送失败");
32             return Results.status(HttpStatus.BAD_REQUEST, resultMap);
33         }
34     }

 

posted @ 2020-05-18 11:08  波神丶  阅读(628)  评论(0)    收藏  举报