javascript - 如何使用 javascript 验证选择标签？

Question

我正在构建一个动画表单，到目前为止，我只能验证输入标签并使其与我的表单动画一起使用，但我还需要在表单中使用选择标签，但我无法做到与动画一起工作，请帮我一些建议。谢谢！

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();

选择标签应该能够通过验证才能传递到下一个问题。

标签： javascriptformsvalidationselect

Answer 1

您的 JS 代码似乎是面向输入的，您只需在animatedForm()中的 else 中输入，您必须创建一个特殊情况供您选择以测试所选值。