JavaScript 自定义表单验证

Question

我是 JavaScript 的新手，往往会遇到一些问题。 我试图为一个表单创建一个自定义验证，它由 4 个输入组成，但代码对我不起作用。 有谁知道我该如何解决？ 这里只是输入之一：

          <div class="inputWrapper">
            <input class="formInput required type="text" name="Email" id="Email" placeholder="Email Address"/>
            <img class="errorImg hidden" src="/images/icon-error.svg" />
            <div id="emailError" class="errorMessage hidden">
              <i>Email cannot be empty</i>
            </div>
          </div>

我还有两个 div 应该出现，当输入提交错误时，在此之前它们有一个 class “隐藏”，不显示。

"use strict";

const formInput = document.querySelector(`.formInput`);
const errorImg = document.querySelector(`.errorImg`);
const errorMessage = document.querySelector(`.errorMessage`);

const input = formInput.nodeValue;

const errorOccured = function () {
  errorMessage.classList.remove(`hidden`);
  errorImg.classList.remove(`hidden`);
};

form.addEventListener("submit", function () {
  if (input === ``) {
    errorOccured();
  }
});

这是页面本身的样子：

Answer 1

您应该在事件监听器 function 中读取输入值

let form = document.querySelector("#form1");
form.addEventListener("submit", function (e) {
    const input = formInput.value;
    if (input === '') {
        errorOccured();
        e.preventDefault();
    }
});