注册页 | 怪默

发布日期: 2020-10-30
作者: 怪默
文章字数: 513
阅读时长: 3 分
阅读次数:
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Register</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #bg-pho {
      background-image: url("https://ftp.bmp.ovh/imgs/2020/10/cfc716bce02a8057.jpg");
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      background-size: cover;
    }

    .box {
      position: absolute;
      top: 25%;
      left: 29%;
      height: 21em;
      width: 33em;
      background-color: hsla(17, 34%, 31%, 0.8);
      box-shadow: 10px 10px 15px#141216;
      border-radius: 2em;
    }

    .loginText {
      text-align: center;
      margin-top: 1em;
      margin-bottom: 0.1em;
      font-size: 1.5em;
      font-weight: 600;
      font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    }

    #form {
      display: table;
      float: left;
      margin-left: 0px;
      margin-right: 0px;
    }

    .inputBox,
    .submitBox {
      float: left;
      outline: none;
      /*清除input被点中后出现外边框*/
      height: 2.3em;
      width: 15em;
      text-align: center;
      border: 0.2em solid #53868B;
      border-radius: 1em;
      margin-left: 12em;
      margin-top: 1.5em;
    }

    .submitBox:hover {
      background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    }
</style>
</head>

<body>
  <div class="box">
    <form action="#" id="form" onsubmit="return check_password()">
      <p class="loginText">Join Us</p>
      <input id="name" class="inputBox" type="text" name="userName" placeholder="Set Name">
      <input id="password" class="inputBox" type="password" name="userPassword" placeholder="Set Password(8 size)">
      <input id="repeat" class="inputBox" type="password" name="userPassword" placeholder="Repeat Password">
      <input class="submitBox" type="submit" name="submit" value="Register">
    </form>
  </div>
  <div id="bg-pho"></div>
  <script>
    function check_password() {
      var name = document.getElementById("name").value;
      var pass = document.getElementById("password").value;
      var word = document.getElementById("repeat").value;
      hand = "true";
      if (name.length < 1) {  //用户名是否空
        alert("You need have a good name");
        hand = "false";
      }
      if (pass.length < 8) { //密码长度
        alert("Your password should be longer than eight digits");
        hand = "false";
      }
      if (pass !== word) { //非严格等于无效
        alert("The password you entered twice is not the same");
        hand = "false";
      }
      if (hand == "false") {
        return false;
      }
      if(hand == "true"){
        alert("Your have successfully registered");
        location.href="https://tk.rthe.net/login.html";  //重定向至新页面
        return false; //返回false，否则将跳转
      }
    }
</script>
</body>

</html>