js短信验证发送 60s递减效果

js短信验证发送 60s递减效果

效果图展示

1. 原界面：
   

2. 点击发送验证码之后
   

   这个水印也是没谁了，大家看重点就好

3. 60s读完之后
   

实现思路

1.点击发送按钮之后，ajax异步请求到后台执行发送短信验证码的操作

2.移除目前的样式，添加失效的样式

3.每隔一秒调用一次方法，将短信验证输入框dom中的text值60依次-1操作

4.将后台返回的验证码存放到客户端，在提交表单的时候进行验证

前端代码

输入框代码：

html代码

<div class="pure-u-1-2 ra">
 <input type="text" placeholder="请输入短信验证码" class="require" name="msgSecurityCode">
 <i class="iconfont icon-safetycertificate icon-input ab"></i>
 <span id="captcha" class="ab send-msg">发送验证码</span>
</div>

发送前的样式，发送后的样式

css代码

.form-register .send-msg {
    right: 32px;
    top: 7px;
    cursor: pointer;
    display: inline-block;
    border-left: 1px solid #ddd;
    color: #0A8AFF;
    padding: 0 10px;
}

.form-register .send-msg-after {
    right: 32px;
    top: 7px;
    display: inline-block;
    border-left: 1px solid #ddd;
    color: #999;;
    padding: 0 10px;
}

发送事件，这里做了手机号的格式判断checkPhoneNumber

js代码

window.LS.set(“msgCode”, res.data) 可以理解为cookie，手机验证码在前端进行判断

//绑定点击事件
function registerPageScript() {
    $('#captcha').on('click', sendMsg)
}

function checkPhoneNumber(phoneNumber) {
    var retTelephone = /^[\d]{5,20}$/
    if (!retTelephone.test(phoneNumber)) {
        $("[name='telephone']").addClass('require-focus');
        toastr.warning('手机号格式不正确');
        return false;
    } else {
        $("[name='telephone']").removeClass('require-focus');
        return true;
    }
}

function sendMsg() {
    var phoneNumber = $('#telephone').val();
    if (checkPhoneNumber(phoneNumber)) {
        //修改为只读60s后可以重新发送
        $('#captcha').removeClass('send-msg')
        $('#captcha').addClass('send-msg-after')
        $("#captcha").unbind();
        restButton(60)
        $.ajax({
            url: "/sendMsg", data: {phoneNumber: phoneNumber}, success: function (res) {
                if (res.rtnCode == 200) {
                    window.LS.set("msgCode", res.data)
                } else {
                    toastr.warning(res.msg)
                }
            }
        });
    }
}

核心方法

function restButton(value) {
    $('#captcha').text("已发送验证码(" + value + ")");
    if (value == 0) {
        $('#captcha').removeClass('send-msg-after')
        $('#captcha').addClass('send-msg')
        $('#captcha').on('click', sendMsg)
        $('#captcha').text("再次发送验证码");
    } else {
        value--;
        setTimeout("restButton(" + value + ")", 1000);
    }
}

提交方法，只有部分核心代码，如果注册成功将数据发送到后台，插入数据库
js代码

$("#register_submit_button").click(function () {
             $.ajax({
                    url: "/registerUser", data: obj, contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    success: function (res) {
                        if (res.rtnCode == 200) {

                        } else {
                            toastr.warning(res.msg)
                        }
                    }
                });
    });

验证二维码js代码

        //短信验证
        var msgCode = window.LS.get('msgCode')
        if (msgCode != $("[name='msgSecurityCode']").val() || msgCode == null) {
            $("[name='msgSecurityCode']").addClass('require-focus');
            toastr.warning('短信验证码不正确');
            return false;
        }

后台代码

sendMessageUtil为短信发送的SDK封装工具类，可以根据需求进行修改
setResultFail和setResultSuccess为restful接口风格的封装
java代码

    @RequestMapping("/sendMsg")
    @ResponseBody
    private ResponseBase sendMsg(@RequestParam("phoneNumber") String phoneNumber) {
        if (phoneNumber == null) {
            return setResultFail("短信发送失败，手机号为空。");
        }
        //随机生成短信验证码
        String code = String.valueOf((int) ((Math.random() * 9 + 1) * 1000));
        //2.异步发送手机短信，并插入手机短信相关信息
        boolean flag = sendMessageUtil.sendMsg(phoneNumber, code);
        if (!flag) {
            return setResultFail("短信发送失败！手机号：" + phoneNumber);
        } else {
            return setResultSuccess(code);
        }
    }