wuliaorenz-skull
/
regist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>skull-注册</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>
        body{
            background-color: #ccc;
        }
        *{
            padding: 0;
            margin: 0;
        }
        h2{
            text-align: center;
            text-shadow: 10px 10px 10px 10px grey;
        }
        .public{
            display: block;
            background-color: rgba(255, 255, 255, 0.6);
            margin: 0 auto;
            line-height: 35px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            border-radius: 10px;
            width: 300px;
            margin-top: 20px;
            color: #777;
            border: none;
            border: 2px solid;
            box-sizing: border-box;
            outline: none;
        }
        input{
            outline: none;
        }
        .bt{
            cursor: pointer;
        }
        .bt:hover{
            border: 2px solid #f0f;
        }
        form{
            margin-top: 200px;
        }
        #log{
            background-color: white;
            border: 2px solid #f0f;
        }

        .logobar{
            width: 335px;
            height: 100px;
            background: url(./images/ban.png) no-repeat;
            background-size: 100% 100%;
            background-color: #ccc;
            position: absolute;
            left: 50%;
            margin-left: -167px;
            top: 50px;
        }
        .logobar .text{
            background: linear-gradient(to right, #888, black);
            -webkit-background-clip: text;
            color: transparent;

            width: 115px;
            /* font-weight: bold; */
            font-style: italic;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    </style>
</head>
<body>
<form method="POST" action="doregist.php">
    <h2>注册</h2>
    <input type="text" placeholder="用户名" class="public" id="username" name="username">
    <input type="text" placeholder="昵称" class="public" id="petname" name="petname">
    <input type="password" placeholder="密码" class="public" id="pwd" name="pwd">
    <input type="password" placeholder="确认密码" class="public" id="repwd" name="repwd">
    <button type="submit" class="public bt" id="reg">注册</button>
    <button type="button" class="public bt" id="log">去登录</button>
</form>
<div class="logobar">
    <p class="text">网页书签收藏夹</p>
</div>
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
		//键盘事件，按回车登录
        $(document).keydown(function(event){
            if(event.keyCode==13){
                $("#btn").click()
            }
        })
        //链接
        $("#log").click(function(){
			window.location = "login.html"
		})

		//注册按钮点击事件
		$("#reg").click(function(){
			if($("#username").val().match(/^\s*$/) !== null){	//正则表达式判断用户名不为空
				alert("用户名不能为空")
				return false
			}
            if($("#petname").val().match(/^\s*$/) !== null){	//正则表达式判断用户名不为空
				alert("昵称不能为空")
				return false
			}
			if($("#pwd").val().match(/^\s*$/) !== null){	    //正则表达式判断密码不为空
				alert("密码不能为空")
				return false
            }
            if($("#pwd").val() !== $("#repwd").val()){
				alert("两次密码不同")
				return false
			}
            if($("#username").val().length > 16 || $("#pwd").val().length > 16 || $("#petname").val().length > 16){
                alert("不能超过16个字符")
                return false
            }
            if($("#pwd").val().length < 6){
                console.log($("pwd").length);
                alert("密码过短")
                return false
            }
        })

        $("input").bind("input propertychange",function(){
            if($(this).val().match(/^\s*$/) == null){
                $(this).css({"border":"2px solid #f0f","background-color":"white"})
            }else{
                $(this).css({"border":"2px solid","background-color":"rgba(255, 255, 255, 0.6)"})
            }

            for(let i = 0;i < 4;i++){
                if($("input").eq(i).val().match(/^\s*$/) !== null){
                    $("#reg").css({"border":"2px solid","background-color":"rgba(255, 255, 255, 0.6)"})
                    break
                }
                if(i == 3){
                    $("#reg").css({"border":"2px solid #f0f","background-color":"white"})
                }
            }
        })
	})
</script>
</body>
</html>