短信返回验证码功能的实现

最新推荐文章于 2020-11-11 14:41:44 发布

wzjnbl111

最新推荐文章于 2020-11-11 14:41:44 发布

阅读量775

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wzjnbl111/article/details/47256291

本文介绍了前端JS如何实现验证码的格式验证以及发送短信验证码的功能。当用户输入手机号后，前端会进行格式校验，通过后利用AJAX发送请求到后端Controller的接口，发送短信验证码。Controller中，接口接收到请求后生成随机验证码并存入session，同时调用SmsUtil发送短信。如果发送失败，将返回错误信息。此外，还包括了对用户名的检查以及数据库查询服务层和数据层的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前端JS中进行验证码格式书写

function validate(){

var phoneNum = $("#phone3").val();

var reg = /^1\d{10}$/; //定义正则表达式

if(!reg.test(phoneNum)){

$('#phone3').attr("data-content" , "请输入正确的手机号码格式！");

$('#phone').popover('show');

$('#num').attr("data-content","");

setInterval(function(){ //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

$('#phone3').popover('destroy');

},2000);

}else{

var count = 60; //间隔函数，1秒执行

if(""!=$("#phone3").val()&&null!=$("#phone3").val()){

curCount = count; //设置button效果，开始计时

$("#btn").attr("disabled","true");

$("#btn").val("请在"+curCount+"秒内输入");

InterValObj = window.setInterval(SetRemainTime,1000); //启动计时器，1秒执行一次

$.ajax({

//提交数据的类型 POST GET

type : "POST",

//提交的网址

url:ctx + "/clientUser/verifyPhoneNo",

//提交的数据

data:{

phoneNo:$("#phone3").val()

//返回数据的格式

datatype: "json",

//成功返回之后调用的函数

success :function(data){

$('#btn').attr("data-content","验证码已通过短信发送成功！ ");

$('#btn').popover('show');

$('#btn').attr("data-content","");

setInterval(function(){

$('#btn').popover('destroy');

},2000);

//调用出错执行的函数

error:function(){

//请求出错处理

}

});

}else{

$('#phone3').attr("data-content","用户名不能为空！");

$('#phone3').popover('show');
$('#num').attr("data-content","");
setInterval(function(){
$('#phone3').popover('destroy');
},2000);
}
}
}

2.Controller中接口

@ResquestMapping(value = "/verifyPhoneNo" ,method = RequestMethod.POST)

@ResponseBody

public JsonObjectResponse verifyPhoneNo(

@RequestParam(value = "phoneNo") String phoneNo,

@RequestParam(value = "validate", required=false) Boolean validate

) throws Exception {

if(logger.isDebugEnabled()){

logger.debug("———verifyPhoneNo———");

logger.debug("phoneNo = " + phoneNo);
}

String vCode = BaseUtil.getRandomString(4);

session.setAttribute(phoneNo,vCode);

logger.debug("vCode = " + session.getAttribute(phoneNo));

if(null ! =validate){

if(validate){

ClientUser loginUser=clientUserManager.getClientUserByUsername(phoneNo);

if(null ! = loginUser){

return JsonObjectResponse.failResponseWithMessage("用户名已存在！");

}

try{

boolean result = SmsUtil.sendSmsByETONENET("","86"+phoneNo, vCode+"(房达人手机验证码，请完成验证)，如非本人操作，请忽略本短信。",1);

if(result){

logger.debug("session.getAttribute("+phoneNo+") = " + session.getAttribute(phoneNo));

return JsonObjectResponse.failResponseWithMessage("该号码验证码发送次数已超过上限，请24小时后再试");

}else{

logger.error("phoneNumber : " + phoneNo + "该号码已超过上限");

return JsonObjectResponse.failResponseWithMessage("该号码验证码发送次数已超过上限，请24小时后再试");

}

}catch(Exception e){

e.printStackTrace();

logger.debug("send vCode error");

logger.debug("--------------------------------------");

return JsonObjectResponse.failResponseWithMessage("验证码发送失败，请重试");

}

3.ClientUserManagerImpl 的service方法。

@Override

public ClientUser getClientUserByUsername(String username){

return clientUserDao.getClientUserByUserName(username);

}

4. ClientUserDao 的方法。

@Override
public ClientUser getClientUserByUserName(String username) {
Criteria criteria = this.getSession().createCriteria(ClientUser.class);

List<ClientUser> clientUsers= criteria
.add(Restrictions.eq("username", username))
.list();
if(clientUsers.isEmpty()){
return null;
}else {
return clientUsers.get(0);
}
}