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

layui封装库

    <!--layui封装库-->
    <script src="js/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">

构建表单

<div style="margin-top: 10px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline"><input type="text" name="mobile" id="mobile" lay-verify="mobile" autocomplete="off" class="layui-input"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline"><input type="text" name="smscode" id="smscode" lay-verify="smscode" autocomplete="off" class="layui-input" disabled="disabled"></div>
            <div class="layui-input-inline">
                <input type="button" class="layui-btn layui-btn-primary" id="btnSendCode" disabled="disabled" value="获取验证码">
            </div>
        </div>
    </form>
</div>

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