手機驗證 發送驗證碼倒計時js

html:html

<input name="Tel" class="weui-input" type="tel" placeholder="請輸入手機號">
<button type="button" class="weui-vcode-btn" onclick="getCode(this)">獲取驗證碼</button>

js:ajax

<script>
 /*獲取驗證碼*/
        function getCode(obj) {
            if (checkPhone()) {//驗證手機號碼
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("SendVerifyCode", "Account")',
                    data: { Tel: $("input[name='Tel']").val() },
                    success: function (result) {
                        if (result.Success) {

                        }
                        else {
                            $.toptip(result.ErrorMessage, 'error');
                        }
                    },
                    error: function (result) {
                        $.toptip('未知異常致使請求失敗,請重試.', 'error');
                    }
                });
                settime(obj); //倒計時
            }
            else {
                $("input[name='Tel']").focus();
                return;
            }
        }
        //驗證手機號碼
        function checkPhone() {
            var phone = $("input[name='Tel']").val();
            var pattern = /^1[0-9]{10}$/;
            if (phone.length == 0) {
                //alert('請輸入手機號碼');
                $.toptip("請輸入手機號碼", 'error');
                return false;
            }
            if (!pattern.test(phone)) {
                //alert('請輸入正確的手機號碼');
                $.toptip("手機號格式錯誤", 'error');
                return false;
            }
            return true;
        }
        var countdown = 60;
        function settime(obj) {
            if (countdown == 0) {
                $(obj).removeAttr("disabled");
                $(obj).text("獲取驗證碼");
                countdown = 60;
                return;
            } else {
                $(obj).attr("disabled", true);
                $(obj).text(countdown +'s'+'後重發');
                countdown--;
            }
            setTimeout(function () {
                settime(obj)
            }, 1000)
        }
</script>
相關文章
相關標籤/搜索