0

如果电子邮件输入符合要求，我正在尝试删除两个类。当我尝试删除“.visible”类时，它只会从“errorIcon”中删除，而不是从“errorMsg”中删除。

而且当我在两个元素上添加 .classList.remove 时，只显示一个元素。

你们能帮我理解发生了什么吗？

const emailInput = document.querySelector(".email-input");
const submitEmail = document.querySelector(".submit-email");
const errorMsg = document.querySelector(".error-msg");
const errorIcon = document.querySelector(".error-icon");

/* Add Event Listener */

submitEmail.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();
  const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (
    emailInput.value === "" ||
    emailInput.value == null ||
    !emailInput.value.match(regex)
  ) {
    errorIcon.classList.add("visible");
    errorMsg.classList.add("visible");

    emailInput.focus();
  } else errorIcon.classList.remove("visible");
  errorMsg.classList.remove("visible");
}
.error-msg {
  opacity: 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: hsl(0, 63%, 53%);
  padding-top: 1rem;
  padding-left: 1rem;
}

.error-icon {
  position: absolute;
  top: 60%;
  right: 25%;
  opacity: 0;
}

.visible {
  opacity: 1;
}
<div class="email">
  <form action="" method="get">
    <input type="email" placeholder="Email Address" class="email-input" required />
    <div class="error-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
        <g fill="none" fill-rule="evenodd">
          <circle cx="12" cy="12" r="12" fill="#F96464" />
          <path
            fill="#FFF"
            fill-rule="nonzero"
            d="M13.256 6v9.056h-2V6h2zm-.944 12.464c-.384 0-.699-.104-.944-.312a1.027 1.027 0 0 1-.368-.824c0-.33.125-.608.376-.832.25-.224.563-.336.936-.336.373 0 .68.112.92.336.24.224.36.501.36.832 0 .341-.117.616-.352.824-.235.208-.544.312-.928.312z"
          />
        </g>
      </svg>
    </div>
    <button type="submit" class="submit-email" req>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="20">
        <path
          fill="none"
          stroke="#FFF"
          stroke-width="2"
          d="M1 1l8.836 8.836L1 18.671"
        />
      </svg>
    </button>
  </form>
</div>
<div class="error-msg">Please Provide a valid email</div>

4

1 回答 1

0

要使 else 执行这两个语句，您必须将它们括在大括号中。
看看其他的，然后再试一次！

这是工作代码：

const emailInput = document.querySelector(".email-input");
const submitEmail = document.querySelector(".submit-email");
const errorMsg = document.querySelector(".error-msg");
const errorIcon = document.querySelector(".error-icon");

/* Add Event Listener */

submitEmail.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();
  const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
 if (
   emailInput.value === "" ||
   emailInput.value == null ||
   !emailInput.value.match(regex)
 ) {
    errorIcon.classList.add("visible");
    errorMsg.classList.add("visible");

   emailInput.focus();
 } else {
        errorIcon.classList.remove("visible");
        errorMsg.classList.remove("visible");
   }
 }
于 2021-05-07T06:17:25.457 回答