如何在表单中控制输入值

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>

  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="18" max="100">

  <button type="submit">提交</button>
</form>

input[type="text"], input[type="email"], input[type="number"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
}

document.getElementById('myForm').addEventListener('submit', function(event) {
  let isValid = true;

  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;
  const age = document.getElementById('age').value;

  if (username.length < 3) {
    alert('用户名至少需要3个字符');
    isValid = false;
  }

  if (!email.includes('@')) {
    alert('请输入有效的邮箱地址');
    isValid = false;
  }

  if (age < 18 || age > 100) {
    alert('年龄必须在18到100之间');
    isValid = false;
  }

  if (!isValid) {
    event.preventDefault(); // 阻止表单提交
  }
});

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
  alert('请输入有效的邮箱地址');
  isValid = false;
}

document.getElementById('username').addEventListener('blur', function() {
  if (this.value.length < 3) {
    this.style.borderColor = 'red';
  } else {
    this.style.borderColor = '';
  }
});

if (!isValid) {
  event.preventDefault();
}