jQuery手机倒计时验证【原创】

查看演示 下载资源 下载积分： 60 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

<div style="height: 60px;" id="phone_area">
    <span class="red">
        *
    </span>
    手机号：
    <input type="text" class="input" name="phone" id="phone" placeholder="请输入手机号"
    autocomplete="off" />
</div>
<div id="code_area">
    <span class="red">
        *
    </span>
    验证码：
    <input type="text" style="width:90px;height:26px;line-height: 26px;" class="input"
    name="code" autocomplete="off" />
    <input type="button" value="获取验证码" class="btn" id="sendPhoneCode" onclick="send_phone_code()"
    autocomplete="off" />
</div>

jQuery

var wait = 120; //倒计时120秒
var intervalId; //定时
var i = wait; //倒计时递减 1
function exit() {
    $("#sendPhoneCode").val(i + "秒后重新发送").addClass("disabled");
    i = i - 1;
    if (i <= -1) {
        clearInterval(intervalId);
        $("#sendPhoneCode").removeAttr("disabled");
        $("#sendPhoneCode").val("发送验证码").removeClass("disabled");
    }
}
function send_phone_code() {

    var phone = $("#phone").val();
    if (phone == '') {
        alert("请输入手机号！");
        return false;
    }
    if (!phone.match(/^(((13[0-9]{1})|159|153)+\d{8})$/)) {
        alert("手机号格式有误！");
        return false;
    }

    i = wait;
    $.post("ajax.php", {
        "phone": phone
    },
    function(data) {
        if (data == 1) {
            $("#sendPhoneCode").attr("disabled", "disabled");
            $("#sendPhoneCode").val("发送成功");
            intervalId = setInterval("exit()", 1000);
        }
    })
}