发送手机短信获取验证码功能

最新推荐文章于 2024-08-13 15:49:43 发布

unique

最新推荐文章于 2024-08-13 15:49:43 发布

阅读量8.7k

点赞数

分类专栏： Java 文章标签：验证码 java 手机短信 mobile

本文链接：https://blog.csdn.net/qllinhongyu/article/details/25076359

版权

本文介绍了手机短信验证码功能的实现，主要分为前端触发倒计时、后台通过代理平台发送短信及用户验证信息处理三个步骤。在前端，完成手机号输入后的验证倒计时功能；在后台，通常使用运营商接口或第三方短信服务公司发送验证码；用户提交后，后台进行逻辑判断。文中以调用运营商接口为例，展示相关代码。

摘要由CSDN通过智能技术生成

因为移动端的方便，现在网络上很多的网站与应用都有与实现用户手机绑定的功能。这样做的好处很多，例如账号登陆、修改密码、在线支付……等功能模块都可以与手机实时获取验证码短信结合，来确保用户的安全性操作。

而这整功能模块的实现，我把它大致分为三个步骤：

（1）前端触发获取验证码,同步显示有效验证倒计时；

（2）后台通过代理平台发送验证短信；

（3）用户提交验证信息，后台逻辑判断处理。

一、首先，与大家分享下前端的实现：

如图：输入完正确的手机号码后再触发有效验证倒计时。

JS代码如下（头部需引入jquery）：

function getCode(){
        var tel = $("#mobile").val();//获取手机号码输入框值
        var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
        if(!reg.test(tel)){ //校验手机号码格式
            alert("请先输入您的正确手机号！");
            document.form1.o_tel.focus();
            return false;
        }
        var paras = "o_tel="+tel;
        //jquery post方法同步提交
        //（提交地址；   data：返回值）
        $.post('<%=basePath%>mobile/sendCode?'+paras,function(data) {
            if(data!=null&&typeof(data)!="undefined"){
                var msg = data.msg;  //返回值为json格式
                if(msg!=null&&typeof(msg)!="undefined"&&msg=="SUCCESS"){
                    get_code_time();  //发送成功则出发get_code_time（）函数
                }else{
                    alert("短信验证码发送失败！请重新获取。");
                }
            }else{
                alert("短信验证码发送失败！请重新获取。");
            }
        },"json");
    }
    var wait = 120;
    function get_code_time(){
        if(wait==0){
            $("#updateverify").removeAttr("disabled");//移除获取验证码按钮的disabled属性
            $("#updateverify").val("获取验证码");
            wait = 120;
        }else{
            $("#updateverify").attr("disabled", true);//设置获取验证码按钮为不可触发
            $("#updateverify").val("剩(" + wait + ")秒");
            wait--;
            setTimeout("get_code_time()", 1000); 
        }
    }

二、接下来我们就该在后台进行短息发送处理了（Demo是用java整合Spring MVC框架写的）：

/**
     * 订单查询发送验证码
     * @param request
     * @param response
     * @return
     */
    @RequestMapping(value="/sendCode",method={RequestMethod.POST,RequestMethod.GET})
    public String sendCode(HttpServletRequest request,HttpServletResponse response){