pg-front-end
/
register.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PG注册</title>
    <link rel="icon" href="static/images/register.png" type="image/png">
    <link href="semantic/dist/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/custom.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="util/request.js"></script>
    <script src="./util/common.js"></script>
</head>
<body>
<script>
    // 如果用户已经登录，则直接跳转到首页
    isLogin(function (response) {
        // 拿到状态码，判断请求状态。
        const code = response.code
        // 这里如果code为200，证明用户已经登录, 所以需要跳转到首页
        if (code === 200) {
            location.href = './index.html'
        }
    }, function (error) {
        console.log(error)

    })
</script>
<!--导航条-->
<script src="static/js/header.js"></script>
<!--中间内容-->
<div class="m-padded-tb-middle ">
    <div class="ui container   " style="width: 800px">
        <h2 class="ui divided header horizontal center aligned">注&emsp;&ensp;册</h2>
        <div class="ui two column stackable grid">
            <div class="column">
                <!--图片区-->
                <img src="https://picsum.photos/id/103/800/350" style="width: 900px;height: 350px" alt=""
                     class="ui fluid image rounded">
            </div>

            <div class="column">
                <form class="ui form  ">
                    <div class="required field">
                        <input type="text" id="nickname" name="name" placeholder="昵称">
                    </div>
                    <div class="required field">
                        <input type="password" id="password" name="password" placeholder="密码(6-16个字符构成，区分大小写)">
                    </div>
                    <div class="required field">
                        <input type="password" name="confirmPassword" placeholder="重新确认密码">
                    </div>
                    <div class="required field m-display-flex">
                        <input type="text" id="phone" name="phoneNum" placeholder="请填写常用手机号">
                    </div>
                    <div class="required field">
                        <div class="m-display-flex inline dropdown left attached">
                            <input type="text" name="num" id="VerifyCode" placeholder="请输入短信验证码">
                            <input type="button" class="ui inline active button attached" value=" 获取验证码"
                                   id="btn-send-code" style="width: 150px;margin-top: 10px;">
                        </div>
                    </div>
                    <div class="ui required checkbox">
                        <input type="checkbox" class="required checkbox" name="confirm" tabindex="0">
                        <label >我已同意 <a href="#">《PlayTogether用户使用协议》</a></label>&emsp;
                    </div>
                    <button class="ui button m-padded-lr-small fluid" type="submit" name="register">注册</button>
                    <div class="required field m-padded-tb-little m-horizontal-right">
                        <a href="login.html">已有账号直接登录 <i class="arrow right icon"></i></a>
                    </div>
                    <div class="ui error message"></div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<script src="static/js/footer.js"></script>
<script src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>

<script>
    $('.dropdown').dropdown({
        on: 'hover'
    });
    $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');
});
$('.ui.form').form({
    fields: {
        title: {
            identifier: 'name',
            rules: [{
                type: 'empty',
                prompt: '昵称:请输入您的昵称'
            }]
        },
        phone: {
            identifier: 'phoneNum',
            rules: [{
                type: 'empty',
                prompt: '手机号:请输入您的手机号码'
            },
                {
                    type: 'exactLength[11]',
                    prompt: "手机号码长度不正确"
                }
            ]
        },
        terms: {
            identifier: 'confirm',
            rules: [
                {
                    type   : 'checked',
                    prompt : '您必须先勾选协议'
                }
            ]
        },
        password: {
            identifier: 'password',
            rules: [{
                type: 'empty',
                prompt: '密码：请输入您的密码'
            }, {
                type: 'minLength[8]',
                prompt: "密码长度最少8位"
            }]
        },
        confirm: {
            identifier: 'confirmPassword',
            rules: [{
                type: 'empty',
                prompt: '请确认您的密码',

            }, {
                type: 'match[password]',
                prompt: '两次密码输入不一致'
            }]
        },
        number: {
            identifier: 'num',
            rules: [{
                type: 'empty',
                prompt: '验证码：请输入您的验证码'
            }]
        }
    }
    , onSuccess(event, fields) {
        event.preventDefault()
        $http(
            {
                url: 'user/register',
                method: 'POST',
                data: {
                    nickname: $("#nickname").val(),
                    phone: $("#phone").val(),
                    password: $("#password").val(),
                    verifyCode: $("#VerifyCode").val()
                }

            }).then(response => {
            if (response.code !== 200) {
                alert(response.message)
                return false;
            }
            alert("注册成功")
            window.setTimeout("window.location='./login.html'", 1000);
        }).catch(error => {
            console.log(error)
        })
    }
});

$('#btn-send-code').click(function () {
        $http({
            url: 'user/registerVerifyCode',
            method: 'GET',
            params: {
                phone: $("#phone").val()
            }
        }).then(response => {
            if (response.code !== 200) {
                alert(response.message)
                return false;
            }
            this.disabled = true
            let waitingTime = 5;
            $(this).val(waitingTime + '后可重新发送')
            const obj = setInterval(() => {
                waitingTime--;
                if (waitingTime <= 0) {
                    clearTimeout(obj)
                    this.disabled = false
                    $(this).val('获取验证码')
                } else {
                    $(this).val(waitingTime + '后可重新发送')
                }
            }, 1000)
        }).catch(error => {
            console.log(error)
        })
    })
</script>
</body>
</html>