JavaScript自定义表单验证

我是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>

这是页面本身的外观：

---

您应该在事件侦听器函数中读取输入值

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

---

在

submit

侦听器中传入

EventObject

和

EventObject.preventDefault（）

。除非您需要解析某些内容，否则我不会使用模板文本，因为处理这些内容需要更长的时间。

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