javascript - 带有表单元素的 addEventListener

Question

我是 Javascript 新手，正在自学。我的页面上的表单有问题。我只想用一个简单的 javascript 代码进行测试，我可以通过在提交表单时向 console.log 添加一个函数来操作我的输入“type=submit”(我在视频上观看了它，我想做我自己做的)。

这是我的代码:

(function() {
"use strict";

document.getElementById('enviar').addEventListener('submit', enviar);

    function enviar(event) {
      event.preventDefault();
      console.log("you submitted the form");
    }

    })();

这是我的 HTML 代码:

<form id="escribenos" method="post">
                <label for="name">Nombre y Apellido</label>
                  <input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
                <label for="email">Correo electrónico</label>
                  <input type="email" name="email" id="email" required />
                <label for="asunto">Asunto</label>
                  <input type="text" name="asunto" id="asunto" />
                <label for="comentario">Mensaje</label>
                <textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
                <input id="enviar" value="enviar" type="submit" ></input>
            </form>

我在这里遇到的问题是根本不起作用..我的 ID 元素选择正确，但我不知道我的代码有什么问题。我创建了一个变量并控制台选择了我的 ID，以查看我是否从 DOM 中获取了正确的元素，并且在控制台中获取了正确的输入元素。如果有人知道为什么不起作用，请。

加:在我的文本输入字段上，我有一个正则表达式，但我没有得到我想要的输出..目标是用户必须写至少两个名字(名字和姓氏)，所以当他们写只有一个它是不正确的..如果有人写了两个以上的名字(名字、中间名和姓氏)，我就遇到了这个正则表达式的问题，我不想让它成为一个错误的答案，因为从技术上讲是正确的。因此，我需要制作一个更好的正则表达式来获得该结果(当用户写入两个或多个名称，而不仅仅是两个时)，但我对正则表达式了解不多。

Answer 1

您正在获取带有 id enviar 的元素，这是提交按钮元素。您需要根据表单的元素id(即escribenos)进行查询。尝试运行下面的代码片段，您可以看到它具有预期的结果。

(function() {
"use strict";

  document.getElementById('escribenos').addEventListener('submit', enviar);

  function enviar(event) {
    event.preventDefault();
    console.log("you submitted the form");
  }

})();

<form id="escribenos" method="post">
  <label for="name">Nombre y Apellido</label>
  <input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
  <label for="email">Correo electrónico</label>
  <input type="email" name="email" id="email" required />
  <label for="asunto">Asunto</label>
  <input type="text" name="asunto" id="asunto" />
  <label for="comentario">Mensaje</label>
  <textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
  <input id="enviar" value="enviar" type="submit" ></input>
</form>