如何用javascript验证select标签？

Question

我正在构建一个动画形式，到目前为止我只能验证输入标签并使其与我的表单动画一起使用，但我需要在表单中使用select标签，而且我无法制作它使用动画，请帮我一些建议。 谢谢！

https://codepen.io/andrewrico/pen/gyEGaw

function animatedForm() {

  const arrows = document.querySelectorAll(".fa-arrow-down");

  arrows.forEach(arrow => {
    arrow.addEventListener("click", () => {
      const input = arrow.previousElementSibling;
      const parent = arrow.parentElement;
      const nextForm = parent.nextElementSibling;

      if (input.type === "text" && validateUser(input)) {
        nextSlide(parent, nextForm);

      } else if (input.type === "email" && validateEmail(input)) {
        nextSlide(parent, nextForm);

      } else if (input.type === "password" && validateUser(input)) {
        nextSlide(parent, nextForm);

      } else {
        parent.style.animation = "shake 0.5s ease";
      }

      parent.addEventListener("animationend", () => {
        parent.style.animation = "";

      });
    });
  });
}

function validateUser(user) {
  if (user.value.length < 6) {
    console.log("not enough characters");
    error("rgb(189, 87, 87)");
    return false;
  } else {
    error("rgb(101, 109, 255)");
    return true;
  }
}

function validateEmail(email) {
  const validation = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (validation.test(email.value)) {
    error("rgb(101, 109, 255)");
    return true;
  } else {
    error("rgb(189, 87, 87)");
    return false;
  }
}

function nextSlide(parent, nextForm) {
  parent.classList.add('innactive');
  parent.classList.remove('active');
  nextForm.classList.add('active');
}

function error(color) {
  document.body.style.background = color;
}

animatedForm();

select标签应该能够通过验证以传递给下一个问题。

Answer 1

你的JS代码似乎是面向输入的，你只需要进入animatedForm（）中的else，就必须为你创建一个特殊情况来选择测试选定的值。