register.html 4.3 KB
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>注册</title>
	<link rel="stylesheet" href="__TMPL__/public/assets/css/login.css">
	<link rel="stylesheet" href="__TMPL__/public/assets/css/register.css">
	<link rel="stylesheet" href="__TMPL__/public/assets/css/mask.css">
</head>

<body>
<!--头部  -->
<include file="public@header"/>
<main>
	<!--彈出框-->
	<div class="mask">

	</div>
	<div class="container">
		<div class="login">
			<div class="login_left">
				<img src="__TMPL__/public/assets/starImg/aicon_88.png" alt="">
			</div>
			<div class="login_right">
				<!--賬號註冊-->
				<div class="login_right_nav clearfix">
					账号注册
				</div>
				<!--登陆-->
				<div class="login_right_main">
					<form action="">
						<!--手机号-->
						<div class="login_right_main_phone">
							<input required type="tel" placeholder="请输入手机号" id="mobile">
						</div>
						<!--密码-->
						<div class="login_right_main_pswd">
							<input required type="password" placeholder="请输入密码" id="password">
						</div>
						<!--验证码-->
						<div class="login_right_main_code">
							<input type="text" required placeholder="请输入验证码" id="mobile_code">
							<input  type="button" onclick="sendCode(this)" value="获取验证码" class="ver_codebtn" />
						</div>
						<!--已有账号,立即登录-->
						<div class="logged_in">
							已有账号?<a href="/portal/login/login">
							立即登录
						</a>
						</div>
						<button type="button" id="zhuce">注册</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</main>
<div class="Keep">
	Copyright © 2004-2019 独角星球 版权所有
</div>
</body>
</html>
<script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
<script src="__TMPL__/public/assets/js/public.js"></script>
<script>
	$(function(){
        //提交注册
        $('#zhuce').click(function () {
            var mobile_code = $.trim($('#mobile_code').val());
            var password = $.trim($('#password').val());
            var phone_number = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            var mobile = $("#mobile").val();
            if (!phone_number.test(mobile)){
                mask("手机号格式有误");
                return false;
            }
            if(password == '') {
                mask("密码不能为空");
                return false;
            }
            if(mobile_code == '') {
                mask("验证码不能为空");
                return false;
            }
			$.ajax({
				type: 'POST',
				url: "/portal/login/registerCommit",
				data: {
					'mobile': mobile,
					'mobile_code': mobile_code,
					'user_pass': password
				},
				dataType: 'json',
				success: function (data) {
					if (data.code == 1) {
						mask('注册成功!');
						window.location.href = '/portal/login/login';
					} else {
						mask(data.msg);
					}
				}
			});
        });
	});
    //注册发送验证码
    function sendCode(val){
        var phone_number = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        var mobile = $("#mobile").val();
        if (!phone_number.test(mobile)){
            mask("手机号格式有误");
        }else {
            $.ajax({
                type: 'POST',
                url: "/portal/common/sendMobileCode",
                data: {
                    'mobile': mobile
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.code == 1) {
                        var countdown = 60;
                        settime(val, countdown);
						mask(data.msg);
                    } else {
                        mask(data.msg);
                    }
                }
            });
        }
    }
    //倒计时
    function settime(val,countdown) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="获取验证码";
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            val.value= countdown +"s";
            countdown--;
            setTimeout(function() {
                settime(val,countdown)
            },1000)
        }
    }
</script>