短信验证码完成注册功能
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 }