JSFiddle - React, Tailwind, and code Playground

HTML

<div class="register">
  <form action="" class="form">
    <h2>註冊</h2>
    <div class="group">
      <label for="user_id">帳號</label>
      <input type="text" id="user_id">
      <span class="error error_id">不能為空白、必須在40字以內</span>
    </div>
    <div class="group">
      <label for="user_email">Email</label>
      <input type="email" id="user_email">
      <span class="error error_email">不能為空白、必須包含 @ 符號</span>
    </div>
    <div class="group">
      <label for="user_password">密碼</label>
      <input type="password" id="user_password">
      <span class="error error_password">不能為空白、必須在8字以上、必須在100字以內</span>
    </div>
    <button class="btn">註冊</button>
  </form>

</div>

SCSS

* {
  box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
  background: linear-gradient(45deg, #e66465, #9198e5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.register{
  width: 600px;
  padding: 20px 0 40px 0;
  background-color: rgba(0, 0, 0, 0.5);
  border: 10px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 60px #000;
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  
  .form {
    width: 400px;
    color: #fff;
    
    h2 {
      padding-bottom: 20px;
      border-bottom: 1px solid #fff;
      margin-bottom: 20px;
      font-size: 36px;
      text-align: center;
    }
    
    .group {
      margin-bottom: 20px;
      
      label {
        line-height: 2;

        &::after {
          content: '*';
          color: #f95050;
          margin-left: 5px;
        }
      }

      input {
        width: 100%;
        border: 1px solid #aaa;
        border-radius: 5px;
        padding: 0 10px;
        height: 2.5rem;
        font-size: 18px;
      }
      
      .error {
        color: #f95050;
        display: none;
        
        &.visible {
          display: block;
        }
      }
    }
    
    .btn {
      margin-top: 10px;
      font-size: 20px;
      border-radius: 5px;
      border: none;
      background-color: #9198e5;
      width: 190px;
      padding: 10px 0;
      color: #fff;
      cursor: pointer;
      margin-left: auto;
      font-weight: bold;
    }
  }
}

JavaScript

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

function register() {
	const accountValue = document.querySelector('input[type=text]').value;
  const emailValue = document.querySelector('input[type=email]').value;
  const passwordValue = document.querySelector('input[type=password]').value;  
  
  event.preventDefault();
  
  initError();
  
  if (accountValue.trim() === '' || accountValue.length >= 40) {
  	errorAccount.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');
  }
}

function initError() {
	errorAccount.classList.remove('visible');
  errorEmail.classList.remove('visible');
  errorpassword.classList.remove('visible');
}

registerButton.onclick = register;