register.html 4.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>十方台公众号</title>
    <script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>
    <script src="__TMPL__/public/assets/js/fontsize.js"></script>
    <link href="__TMPL__/public/assets/css/index.css" rel="stylesheet">
</head>
<body>
<div class="content">
    <div class="input-box">
        <div class="top-input">
            <div class="border-line-box">
                <image src="__TMPL__/public/assets/images/phone_icon.png" class="phone-icon"></image>
                <!--<form action="" onsubmit="return doValidate()" name="forma" class="form">-->
                <input type="number" name="name" id="phone" placeholder="手机号" class="phone-input" value="">
                <!--</form>-->
            </div>
        </div>
        <div class="bottom-input">
            <div class="border-line-box2">
                <div class="input-code-box">
                    <image src="__TMPL__/public/assets/images/code_icon.png" class="code-icon"></image>
                    <input type="number" placeholder="验证码" class="code-input">
                </div>
                <button class="getCode">获取验证码</button>
            </div>
        </div>
    </div>
    <div class="next-btn">
        <div class="next" onclick="goNext()">下一步</div>
    </div>
</div>
</body>
<script>
    function goNext() {
        var phone = document.getElementById('phone').value;
        if (!(/(^[0-9]{3,4}\-[0-9]{7}$)|(^[0-9]{7}$)|(^[0-9]{3,4}[0-9]{7}$)|(^0{0,1}13[0-9]{9}$)/.test(phone))) {
            alert("十方台温馨提示:手机号码有误,请重填");
            return false;
        } else {
            $.ajax({
                        url: "{:url('user/register/doRegister')}",
                        type: "post",
                        data: {
                            mobile:phone,
                            code:$('.code-input').val()
                        },
                        success: function (data) {
                            if (data==1){
                 window.location.href = "{:url('user/register/info')}";
                            }else {
                                alert(data);
                                return false;
                            }
                        }
                    })
            // btnCheck()
        }
    }
    // $("input[type='button']").click(doValidate);
    /**
     * [btnCheck 按钮倒计时常用于获取手机短信验证码]
     */
    // function btnCheck() {
    //     $(this).addClass("on");
    //     var time = 60;
    //     $(this).attr("disabled", true);
    //     var timer = setInterval(function() {
    //         if (time == 0) {
    //             clearInterval(timer);
    //             $(".button").attr("disabled", false);
    //             $(".button").val("获取验证码");
    //             $(".button").removeClass("on");
    //         } else {
    //             $('.button').val(time + "秒");
    //             time--;
    //         }
    //     }, 1000);
    // }


    $(function () {
        //获取短信验证码
        var validCode = true;
        $(".getCode").click(function () {
            var phone = document.getElementById('phone').value;
            if (!(/(^[0-9]{3,4}\-[0-9]{7}$)|(^[0-9]{7}$)|(^[0-9]{3,4}[0-9]{7}$)|(^0{0,1}13[0-9]{9}$)/.test(phone))) {
                alert("十方台温馨提示:手机号码有误,请重填");
                return false;
            } else {
                var time = 60;
                var $code = $(this);
                if (validCode) {
                    validCode = false;
                    var t = setInterval(function () {
                        time--;
                        $code.html(time + "秒");
                        if (time == 0) {
                            clearInterval(t);
                            $code.html("重新获取");
                            validCode = true;
                        }
                    }, 1000)
                }
                $.ajax({
                            url: "{:url('user/register/getCode')}",
                            type: "post",
                            data: {
                                mobile:phone,
                            },
                            success: function (data) {
                                if (data==2){
                                    alert('十方台温馨提示:获取验证码失败');
                                    return false;
                                }
                                else {
                                    alert('十方台温馨提示:'+data)
                                }
                            }
                        })
            }
        })
    })

</script>
</html>