<form id="myForm">
  <label for="email">邮箱：</label>
  <input type="text" id="email" name="email" required>
  <span id="emailError" style="color: red;"></span>
  <br><br>
  <button type="submit" disabled id="submitBtn">提交</button>
</form>

<script>
const emailInput = document.getElementById('email');
const emailError = document.getElementById('emailError');
const submitBtn = document.getElementById('submitBtn');

// 邮箱格式正则
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function validateEmail() {
  const value = emailInput.value.trim();
  
  if (value === '') {
    showError('邮箱不能为空');
    setInvalid();
  } else if (!emailRegex.test(value)) {
    showError('请输入有效的邮箱地址');
    setInvalid();
  } else {
    showError('');
    setValid();
  }
}

function showError(msg) {
  emailError.textContent = msg;
}

function setValid() {
  emailInput.style.borderColor = 'green';
  submitBtn.disabled = false;
}

function setInvalid() {
  emailInput.style.borderColor = 'red';
  submitBtn.disabled = true;
}

// 监听输入事件
emailInput.addEventListener('input', validateEmail);

// 页面加载时根据初始值设置按钮状态
validateEmail();
</script>

// 失焦时验证并显示错误
emailInput.addEventListener('blur', validateEmail);

// 聚焦时如果之前有错误，可选择清空提示或保留
emailInput.addEventListener('focus', function () {
  if (emailError.textContent && emailInput.value.trim() !== '') {
    // 可选：开始编辑时不清除错误，或延迟清除
  }
});

function validateForm() {
  let isFormValid = true;
  const username = document.getElementById('username');
  const password = document.getElementById('password');
  
  // 验证用户名（至少3字符）
  if (username.value.trim().length < 3) {
    isFormValid = false;
    username.style.borderColor = 'red';
  } else {
    username.style.borderColor = 'green';
  }

  // 验证密码（至少6字符）
  if (password.value.length < 6) {
    isFormValid = false;
    password.style.borderColor = 'red';
  } else {
    password.style.borderColor = 'green';
  }

  submitBtn.disabled = !isFormValid;
}
// 每个输入框都触发统一验证
document.getElementById('username').addEventListener('input', validateForm);
document.getElementById('password').addEventListener('input', validateForm);

emailInput.addEventListener('input', function () {
  if (emailInput.checkValidity()) {
    emailInput.style.borderColor = 'green';
    submitBtn.disabled = false;
  } else {
    emailInput.style.borderColor = 'red';
    submitBtn.disabled = true;
  }
});