验证码校验模板
功能描述
在开发过程中遇到关于验证码校验的需求,为了以后的高效开发,利用简单的例子抽取代码如下:
开发框架
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);
}
}