JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<div class="main">
   <h1>創建一個新帳戶</h1>
   <p>快來加入我們吧！讓我為您設置您的帳戶。已經有了？<a href="">在這裡登入</a></p>
   <div class="login">
      <ul>
         <p>您還可以使用以下方式登入</p>
         <li id="Facebook">Facebook</li>
         <li id="Line">Line</li>
         <li id="Google">Google</li>
         <li id="no"></li>
      </ul>
      <form action="">
         <p>用戶暱稱：
            <input maxlength="40" type="text" id="name">
            <span id="errorName">不能為空白、必須在40字以內</span>
         </p>
         <p>Email 信箱：
            <input type="email" id="email">
            <span id="errorEmail"> 不能為空白、必須包含 @ 符號</span>
         </p>
         <p>密碼：
            <input type="password" id="password">
            <span id="errorPassword">不能為空白、必須在8字以上、必須在100字以內</span>
         </p>
         <p><input id="submit" type="button" value="註冊" onclick="Btn()"></p>
      </form>
   </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  width: 60%;
  min-width: 450px;
  margin: 3rem auto;
}
.main h1 {
  font-size: 1.5rem;
  text-align: center;
}
.main p {
  font-size: 0.8rem;
  text-align: center;
}
.main .login {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
.main .login p {
  text-align: left;
}
.main .login ul {
  list-style: none;
  margin-right: 1.5rem;
}
.main .login ul li {
  font-size: 1.3rem;
  text-align: center;
  width: 180px;
  border-radius: 10px;
  margin: 1.25rem 0;
  padding: 10px;
  cursor: pointer;
}
.main .login ul #Facebook {
  background-color: #3b5998;
  color: white;
}
.main .login ul #Line {
  background-color: #07B53B;
  color: white;
}
.main .login ul #Google {
  background-color: #ff7272;
  color: white;
}
.main .login form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 1px solid grey;
  padding-left: 1rem;
}
.main .login form p {
  margin: 0.3rem;
  display: flex;
  flex-direction: column;
}
.main .login form p input {
  font-size: 1rem;
  margin: 0.2rem;
  border: 1px solid gray;
  border-radius: 3px;
  padding: 8px;
}
.main .login form p span {
  font-size: 0.7rem;
  color: #ff4949;
  visibility: hidden;
  transition: all 0.2s ease;
}
.main .login form p #submit {
  font-size: 1rem;
  text-align: center;
  background-color: #ffa56a;
  width: 150px;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}

JavaScript

function Btn(){
   let Name = document.querySelector("#name").value;
   let email = document.querySelector("#email").value;
   let password = document.querySelector("#password").value;

   if(Name == "" || Name.length >= 40){
      document.querySelector("#errorName").style.visibility = "visible";
   }else{
      document.querySelector("#errorName").style.visibility = "hidden";
   }

   if(email == "" || !email.includes("@")){
      document.querySelector("#errorEmail").style.visibility = "visible";
   }else{
      document.querySelector("#errorEmail").style.visibility = "hidden";
   }
   
   if(password == "" || password.length <= 8 || password.length >= 100){
      document.querySelector("#errorPassword").style.visibility = "visible";
   }else{
      document.querySelector("#errorPassword").style.visibility = "hidden";
   }
}