介绍 & lt; div类=靶问降陌嗉秇as-feedback"比;
& lt;输入类型=皌el"类=癴orm-control"id=皃hone"占位符=扒胧淙胧只拧白畲蟪ざ?11比;
& lt;跨类=癵lyphicon glyphicon-earphone form-control-feedback"祝辞& lt;/span>
& lt;/div>
& lt; div类=皉ow"祝辞
& lt; div类=癱ol-xs-6 pull_left"比;
& lt; div类=癴orm-group"祝辞
& lt;输入类=癴orm-control"id=癿sg_num"占位符=扒胧淙胙橹ぢ搿氨?
& lt;/div>
& lt;/div>
& lt; div类=癱ol-xs-6 pull_center"比;
& lt; div类=癴orm-group"祝辞
& lt;输入类型=癰utton"类=癰tn btn-block btn-flat"id=皏erify_refresh"> var messageData;
var等待=120;//短信验证码120秒后才可获取下一个/* *
*获取验证码
* @param
*/函数getMsgNum () {
var phoneNumber=$(& # 39; #手机# 39;).val ();
setButtonStatus (,);//设置按钮倒计时
var obj={
phoneNumber: phoneNumber
};
. ajax({美元
url: httpurl + & # 39;/sendMsg& # 39;//后台短信发送接口
类型:& # 39;文章# 39;
数据类型:& # 39;json # 39;
contentType:“应用程序/json"
异步:假的,//假同步
数据:JSON.stringify (obj),
xhrFields: {
withCredentials:真
}，
成功:函数(结果){
如果结果。代码==& # 39;200 & # 39;){
messageData=result.data;
其他}{
alert(“错误码:“;+数据。代码+“;错误信息:“;+ data.message);
}
}，
错误:功能(XMLHttpRequest, textStatus errorThrown) {
console.log (XMLHttpRequest.status);
console.log (XMLHttpRequest.readyState);
console.log (textStatus);
}
});
}/* *
*设置按钮状态
*/函数setButtonStatus () {
如果(等==0){
that.removeAttribute (“disabled");
that.value=懊夥鸦袢⊙橹ぢ搿?
等待=60;
其他}{
that.setAttribute (“disabled",真实);
that.value=等待+“秒后可以重新发送“;
等,;
setTimeout(函数(){
setButtonStatus (,)
},1000)
}
}/* *
*注册按钮
*/函数validateNum () {
var data={
msgNum: inputMsgNum,
夯实:messageData.tamp,
散列:messageData.hash
};
. ajax({美元
url: httpurl + & # 39;/validateNum& # 39;//验证接口
类型:& # 39;文章# 39;
数据类型:& # 39;json # 39;
contentType:“应用程序/json"
数据:JSON.stringify(数据),
异步:假的,//假同步
成功:功能(数据){//业务处理
}，
错误:功能(XMLHttpRequest, textStatus errorThrown) {
console.log (XMLHttpRequest.status);
console.log (XMLHttpRequest.readyState);
console.log (textStatus);
}
});
}
本篇文章为大家展示了短信验证码校验功能如何利用SpringBoot实现,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>思路
用户输入手机号后,点击按钮获取验证码。并设置冷却时间,防止用户频繁点击。
后台生成验证码并发送到用户手机上,根据验证码,时间及一串自定义秘钥生成MD5值,并将时间也传回到前端。
用户输入验证码后,将验证码和时间传到后台。后台先用当前时间减去前台传过来的时间验证是否超时。如果没有超时,就用用户输入的验证码+时间+自定义秘钥生成MD5值与之前的MD5值比较,如果相等则验证码校验通过,如果不等则说明验证码输入错误校验失败。
<强>原理有点像解方程:
xyz经过一种不可逆运算得到,将y和传给用户,z后台保留,用户填写x1后,将x1 y传回后台,后台再用x1 y z经过不可逆运算得到A1,如果A1和一个相等,则验证码校验通过。
本例基于引导,html代码中有引导样式。如果你不想用引导,可以将类样式去掉。效果如图所示。
html代码如下:
其中setButtonStatus()方法用于设置按钮冷却状态。效果如下图
sendMsg (@RequestBody地图短信验证码校验功能如何利用SpringBoot实现
