用于包角材料输入的组件不显示错误样式

<input type="text" id="inputField" />
<div id="error-message" class="hidden">请输入有效的邮箱地址</div>

.hidden {
  display: none;
}

.error {
  border: 1px solid red;
}

#error-message {
  color: red;
}

document.getElementById('inputField').addEventListener('input', function(event) {
  const inputValue = event.target.value;
  const errorMessage = document.getElementById('error-message');
  const inputField = event.target;

  if (!isValidEmail(inputValue)) {
    inputField.classList.add('error');
    errorMessage.classList.remove('hidden');
  } else {
    inputField.classList.remove('error');
    errorMessage.classList.add('hidden');
  }
});

function isValidEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}