<form>
  <label for="username">用戶名:</label>
  <input type="text" id="username" required>
  <br>
  
  <label for="password">密碼:</label>
  <input type="password" id="password" required>
  <br>
  
  <label for="email">郵箱:</label>
  <input type="email" id="email" required>
</form>

// 選擇輸入框
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const emailInput = document.getElementById('email');

// 添加校驗(yàn)事件
usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
emailInput.addEventListener('input', validateEmail);

function validateUsername() {
  const regex = /^[a-zA-Z0-9_-]{3,16}$/;
  const value = usernameInput.value;

  if (regex.test(value)) {
    // 校驗(yàn)通過
    usernameInput.classList.remove('invalid');
    usernameInput.classList.add('valid');
  } else {
    // 校驗(yàn)失敗
    usernameInput.classList.remove('valid');
    usernameInput.classList.add('invalid');
  }
}

function validatePassword() {
  const regex = /^[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  const value = passwordInput.value;

  if (regex.test(value)) {
    // 校驗(yàn)通過
    passwordInput.classList.remove('invalid');
    passwordInput.classList.add('valid');
  } else {
    // 校驗(yàn)失敗
    passwordInput.classList.remove('valid');
    passwordInput.classList.add('invalid');
  }
}

function validateEmail() {
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  const value = emailInput.value;

  if (regex.test(value)) {
    // 校驗(yàn)通過
    emailInput.classList.remove('invalid');
    emailInput.classList.add('valid');
  } else {
    // 校驗(yàn)失敗
    emailInput.classList.remove('valid');
    emailInput.classList.add('invalid');
  }
}

.valid {
  border: 1px solid green;
}

.invalid {
  border: 1px solid red;
}