JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列三：練習4 ── 表單驗證</h1>

<form action="" method="post" id="register-box">
  <label for="username"><span class="must-have">*</span>用戶暱稱</label>
  <input type="text" name="username" id="username" placeholder="用戶暱稱" maxlength="40" required>
  <p class="alert" id="userNameAlert">不能為空白、必須在40字以內</p>

  <label for="email"><span class="must-have">*</span>Email 信箱</label>
  <input type="email" name="email" id="email" placeholder="Email 信箱" required>
  <p class="alert" id="emailAlert">不能為空白、必須包含 @ 符號</p>

  <label for="password"><span class="must-have">*</span>密碼</label>
  <input type="password" name="password" id="password" placeholder="密碼" minlength="8" maxlength="100" required>
  <p class="alert" id="passwordAlert">不能為空白、必須在8字以上、必須在100字以內</p>

  <input type="submit" name="" id="" value="註冊" onclick="check()">
</form>

CSS

* {
  padding: 0;
  margin: 0;
}

#register-box {
  width: 350px;
  padding: 20px;
  margin: 30px auto;
  border: 5px solid rgba(72, 125, 204, 1);
  border-radius: 10px;
  box-sizing: border-box;
}

#register-box label,
#register-box input {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#register-box label {
  font-size: 16px;
  font-weight: 900;
  color: rgba(72, 125, 204, 1);
}

#register-box label .must-have {
  color: #f00;
  vertical-align: top;
}

#register-box input {
  padding: 5px 10px;
  margin: 5px 0 10px;
  font-size: 14px;
  border-width: 2px;
  border-radius: 5px;
  border-style: solid;
  outline: none;
}

#register-box p.alert {
  font-size: 12px;
  color: #f00;
  margin: 10px 0;
  text-align: justify;
  display: none;
}

#register-box input:not([tpye="submit"]):focus {
  border-color: rgba(72, 125, 204, 1);
}

#register-box input[type="submit"] {
  margin: 0;
  border: none;
  font-size: 16px;
  cursor: pointer;
  background-color: #ccc;
  color: #000;
  transition: 0.3s;
}

#register-box input[type="submit"]:hover {
  background-color: rgba(72, 125, 204, 1);
  color: #fff;
}

JavaScript

function check() {
  let registerBtn = event.target;
  let registerBox = registerBtn.closest("form#register-box");

  // 檢查用戶暱稱
  let userName = registerBox.querySelector("#username").value;
  if (userName === "" || userName.length > 40) {
    let userNameAlert = registerBox.querySelector("#userNameAlert");
    userNameAlert.style.display = "block";
  } else {
    userNameAlert.style.display = "none";
  }
  // 檢查信箱
  let email = registerBox.querySelector("#email").value;

  // includes 沒找到對應字串，返回false；有找到會返回true
  let validIncludes = email.includes("@");
  // indexOf 沒找到對應字串，返回 -1；有找到會返回第一個符合指定字串的索引值
  let validIndexOf = email.indexOf("@");
  if (validIndexOf === -1) {
    // -1仍為true，，所以找不到時，要改為0才會是false
    validIndexOf = 0;
  }
  // match 沒找到對應字串，返回null；有找到會返回array
  let validRegExpMatch = email.match(/@/);
  // test 沒找到對應字串，返回false；有找到會返回true
  let validRegExpTest = /@/.test(email);

  // 檢查字串方法，會有支援度問題
  // 沒有輸入文字就不可能找到@，所以也不用特別設定email === ''
  if (validIncludes || validIndexOf || validRegExpMatch || validRegExpTest) {
    emailAlert.style.display = "none";
  } else {
    emailAlert.style.display = "block";
  }

  // 檢查密碼
  let password = registerBox.querySelector("#password").value;
  console.log(password.length);
  if (password === "" || password.length < 8 || password.length > 100) {
    let passwordAlert = registerBox.querySelector("#passwordAlert");
    passwordAlert.style.display = "block";
  } else {
    passwordAlert.style.display = "none";
  }
}