验证码校验模板

功能描述

在开发过程中遇到关于验证码校验的需求，为了以后的高效开发，利用简单的例子抽取代码如下：

开发框架

vue + ssm + redis + dubbo + mysql + sms

html页面

<script>
  var id = getUrlParam("id");
</script>
...

<div class="input-row">
    <label>手机号</label>
    <input v-model="orderInfo.telephone" type="text" class="input-clear" placeholder="请输入手机号">
    <input style="font-size: x-small;" id="validateCodeButton" @click="sendValidateCode()" type="button" value="发送验证码">
</div>
<div class="input-row">
    <label>验证码</label>
    <input v-model="orderInfo.validateCode" type="text" class="input-clear" placeholder="请输入验证码">
</div>

js文件

     var clock = '';//定时器对象，用于页面30秒倒计时效果
     var nums = 30;  // 30 秒倒计时，可自行修改
     var validateCodeButton;
      //基于定时器实现30秒倒计时效果
      function doLoop() {
          validateCodeButton.disabled = true;//将按钮置为不可点击
          nums--;
          if (nums > 0) {
              validateCodeButton.value = nums + '秒后重新获取';
          } else {
              clearInterval(clock); //清除js定时器
              validateCodeButton.disabled = false;
              validateCodeButton.value = '重新获取验证码';
              nums = 30; //重置时间
          }
      }

VUE代码

 //发送验证码
sendValidateCode(){
    // 校验手机号格式
    // 获取手机号
    var telephone = this.orderInfo.telephone;
    // 调用js文件中的方法
    if (!checkTelephone(telephone)) {
        this.$message.error("请输入正确的手机号");
        return false;
    }
    // 设置倒计时
    // 获取发送校验码按钮
    validateCodeButton = document.getElementById("validateCodeButton");
    clock = window.setInterval(doLoop,1000);
    // 发送ajax请求
    axios.get("/validateCode/send4Order.do?telephone=" + telephone).then((res)=>{
        if (!res.data.flag) {
            // 验证码发送失败
            this.$message.error(res.data.message);
        }
    })
},

后端代码抽取

发送验证码

我在这里自定义了一个验证码工具类用于生成验证码ValidateCodeUtils

public Result send4Order(String telephone){
        // 生成验证码
        Integer code = ValidateCodeUtils.generateValidateCode(4);

        try {
            //发送短信
//            SMSUtils.sendShortMessage(telephone,code.toString());
            System.out.println("发送的手机验证码为：" + code);

        } catch (Exception e) {
            e.printStackTrace();
            //验证码发送失败
            return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
        }
        //将生成的验证码缓存到redis
        jedisPool.getResource().setex(
                telephone + RedisMessageConstant.SENDTYPE_ORDER,5 * 60,code.toString());
        //验证码发送成功
        return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);
    }

校验验证码

public Result submit(@RequestBody Map map){
	// ① 校验手机验证码
        // 获取手机号
        String telephone = (String) map.get("telephone");
        // 获取 Redis 中的验证码
        String codeInRedis = jedisPool.getResource().get(telephone + RedisMessageConstant.SENDTYPE_ORDER);
        // 获取用户输入的验证码
        String validateCode = (String) map.get("validateCode");

        // 校验验证码
        if (codeInRedis == null ||!codeInRedis.equalsIgnoreCase(validateCode)) {
            return new Result(false, MessageConstant.VALIDATECODE_ERROR);
        }
    
}