JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<div class="container">
  <form>
     <div>
       <label>用戶暱稱</label>
       <span id='error-id' class="error error_id">不能為空白、必須在40字以內</span>       
       <input type="text" name="username" id="name" required>
     </div>
     <div>
       <label>Email 信箱</label>
       <span id='error-email' class="error error_email">不能為空白、必須包含 @ 符號</span>
       <br/>
       <input type="email" id="userEmail" required>
     </div>
     <div>
       <label>密碼</label>
       <span id='error-password' class="error error_password">不能為空白、必須在8字以上、必須在100字以內</span>
       <br/>
       <input type="password" id="userPassword"  required>
     </div>
       <button onClick="register()" class='btn'>註冊</button>
   </form>
</div>

CSS

* {
  box-sizing: border-box;
}
.container {
  background-color: orange;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 40px;
}
button {
  margin: 0 auto;
}
input {
  width: 100%;
  height:30px;
  border: 1px solid #aaa;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 18px;
}
.error {
  visibility: hidden;
}
.error.visible {
  visibility: visible;
}
#error-id {
  position: relative;
  left: 23vw;
  background-color: red;
  color: yellow;
}
#error-email {
  position: relative;
  left: 20.5vw;
  background-color: red;
  color: yellow;
}
#error-password {
  position: relative;
  left: 5vw;
  background-color: red;
  color: yellow;
}
.btn {
  background-color: #9198e5;
  width: 190px;
  padding: 10px 30px;
  margin-top: 20px;
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

JavaScript

const registerButton = document.querySelector('.btn');
const errorID = document.querySelector('.error_id');
const errorEmail = document.querySelector('.error_email');
const errorpassword = document.querySelector('.error_password');

const register = () => {

   const accountIDValue = document.querySelector('input[type=text]').value;
  const emailValue = document.querySelector('input[type=email]').value;
  const passwordValue = document.querySelector('input[type=password]').value;  
  
 event.preventDefault();
  
  error();
   if (accountIDValue.trim() === '' || accountIDValue.length >= 40) {
  	errorID.classList.add('visible');
  }
  if (emailValue.trim() === '' || !emailValue.includes('@')){
  	errorEmail.classList.add('visible');
  }
  if (passwordValue.trim() === '' || passwordValue.length < 8 || passwordValue.length > 100) {
  	errorpassword.classList.add('visible');
  }
}
const error = () => {
  errorID.classList.remove('visible');
  errorEmail.classList.remove('visible');
  errorpassword.classList.remove('visible');
}