JavaScript自定义表单验证

debugcn 发表于 Dev

基里洛沃夫

我是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，然后它们有一个“ hidden”类，不显示任何内容。

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

页面的外观如下：

瓦希德

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。