layui框架实战案例(10)：短信验证码60秒倒计时

layui封装库

构建表单

    
        
            手机号码
            
        

        
            验证码
            
            
                
            
        
    

layui调用

   /*layui调用*/
    layui.use(['layer', 'form'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;

        //自定义验证规则
        form.verify({
            mobile: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字。']
        });

    });

    $(function () {
        var wait = 60;

        function time(o) {
            if (wait == 0) {
                o.removeAttribute("disabled");
                o.value = "获取验证码";
                wait = 60;
            } else {
                o.setAttribute("disabled", true);
                o.value = "重新发送(" + wait + ")";
                wait--;
                setTimeout(function () {
                    time(o);
                }, 1000);
            }
        }

        $("#mobile").change(function () {
            var mobile = $.trim($("#mobile").val());
            if (mobile.length == 11) {
                $("#smscode").attr("disabled", false).css({"background-color": "#fff"});
                $("#btnSendCode").attr("disabled", false).removeClass("layui-btn layui-btn-primary").addClass("layui-btn layui-btn-normal");

                document.getElementById("btnSendCode").onclick = function () {
                    if (wait != 60) {
                        console.log("请" + wait + "秒后再试！");
                        return;
                    }
                    if (mobile == '') {
                        console.log("请填写手机号码");
                        return;
                    }
                    $("#smscode").val("");

                    time(this);

                    $.getJSON("smsbao.php", {act: 'sms_reg', mobile: mobile}, function (res) {
                        if (res.err == '0') {
                            console.log("发送失败，" + res.err, 4000);
                            return;
                        } else {
                            $("#smscode").val(res.code);
                            console.log("验证码已发送，5分钟内有效");
                            return;
                        }
                    });
                }
            } else {
                $("#smscode").attr("disabled", true);
                $("#btnSendCode").attr("disabled", false).removeClass("layui-btn layui-btn-primary").addClass("layui-btn layui-btn-normal");
            }
        });
    })

@lockdata.cn