短信验证60s倒计时

最新推荐文章于 2020-12-21 17:08:56 发布

「已注销」

最新推荐文章于 2020-12-21 17:08:56 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/weixin_42580403/article/details/103125174

版权

HTML代码

<form name="editForm" id="form" method="post">
    <div class="mui-input-group">
        <div><label>手机号码</label><input type="tel" name="per_tel1" id="per_tel1" placeholder="请填写手机号码"></div>
        <div><label>短信验证码</label>
            <div><input type="text" name="yzm1" id="yzm1" placeholder="填写短信验证码"></div>
            <button type="button" id="request_code1" onclick="send_code(1)">获取验证码</button></div>
    </div>
</form>

jq代码

function send_code(i) {
    var tel_str = $("#per_tel" + i + "").val();
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if (!myreg.test(tel_str)) {
        alert("请填写手机号")
        $("#per_tel" + i + "").focus();
        return false;
    }
    settime(i, 60);
}

function settime(i, secodes) {
    var countdown = secodes;
    if (countdown == 0) {
        $("#request_code" + i + "").attr('disabled', false);
        $("#request_code" + i + "").text("获取验证码");
        countdown = 60;
        return;
    } else {
        $("#request_code" + i + "").attr('disabled', true);
        $("#request_code" + i + "").text("重新发送(" + countdown + "秒后)");
        countdown--;
    }
    setTimeout(function() {
        settime(i, countdown)
    }, 1000)
}