marshhu

html:

<input name="Tel" class="weui-input" type="tel" placeholder="请输入手机号">
<button type="button" class="weui-vcode-btn" onclick="getCode(this)">获取验证码</button>

js:

<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>

 

分类:

技术点:

相关文章: