为什么这个表单验证似乎绕过了 `event.preventDefault();`？

Question

我正在尝试编写一个带有一些基本验证的简单表单，但是按下提交按钮会绕过 event.preventDefault(); 并且无论如何都会提交表单。

function myFunction() {
  if(document.getElementById("username").val() == ''){
    alert('Please enter a username');
    event.preventDefault();
  }
}

这是表单、用户名输入字段和提交按钮的代码：

<form method ="POST" action="db/registerinsert.php" class="content formregister" id="registerform">
  <div class="content formcontact">
    <section class="section">
      <div class="columns">
        <div class="column is-8 is-offset-2">
          <div class="field">
            <label class="label">Username</label>
            <div class="control has-icons-right">
              <input class="input" name="username" id= "username" type="text" placeholder="" required="">
            </div>
          </div>
          <div class="field is-grouped">
            <div class="control">
              <button class="button is-link" type="submit" onclick="javascript:myFunction()" Value="Submit">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</form>

我在 <input> 字段上也有 required=""，但将字段留空也不会触发此操作。

Answer 1

我不确定这是否是您想要的，但如果您想取消提交操作，您应该将事件作为参数传递给函数，如下所示：

const form = document.querySelector('form');
form.addEventListener('submit', myFunction);

`function myFunction(e) {
   if(document.querySelector(".input").value == ''){
      alert('Please enter a username');
      e.preventDefault();
   }
}

希望对您有所帮助

Answer 2

有一些小错误。重要的是：

检索 <input> 值不正确
没有监听 submit 事件

但是使用全局 event 等过时的功能或使用 onclick 属性最终也会导致麻烦。

`<input>`值

<input> 元素没有 val 方法。不要混淆 jQuery with the native DOM API。 jQuery 使用 val 方法，而原生 DOM API 使用 value 属性.

您的函数将在调用时抛出 Uncaught TypeError: document.querySelector(...).val is not a function。

您要比较的值是以下之一：

document.getElementById("username").value // Native DOM; let’s stick with this one
document.querySelector("#username").value // Native DOM
$("#username").val() // jQuery

如果你也想禁止纯空格输入，你也可以在其中任何一个后面附加一个 .trim()。

比较

==和!=差不多never recommended。它们并不总是直观的传递，因为它们经常不必要地执行类型强制转换。请改用 === 和 !==。

if 条件因此应如下所示：

if(document.getElementById("username").value === ""){ /* … */ } // Native DOM

事件对象

您使用 event.preventDefault(); 的方式使用了过时的全局 window.event. . Use the event argument instead. See 。

正确的事件类型和事件目标

单击提交按钮只是一种提交表单的方式。您也可以按 Enter。想一想：您想防止什么？你想阻止表单提交。所以改为听 submit event 。你会在 <form> 上执行此操作，而不是 <button>。只有 <form> 个事件派发 submit 个事件。

命名约定

不重要，但为了避免在最后一步混淆，我将 id="registerform" 重命名为 id="registerForm"，因为 JavaScript uses camelCase 在几个地方。

绑定事件，汇集一切

像 onclick 或 onsubmit 这样的内联事件处理程序是 not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener or jQuery’s .on。

这是事件绑定，使用原生DOMAPIs。它还使用 arrow functions.

document.getElementById("registerForm").addEventListener("submit", (event) => {
  if(document.getElementById("username").value === ""){
    event.preventDefault();
    alert("Please enter a user name.");
  }
});

使用jQuery:

$("#registerForm").on("submit", (event) => {
  if($("#username").val() === ""){
    event.preventDefault();
    alert("Please enter a user name.");
  }
});

在 HTML 中，完全删除 onclick。出于某种原因，您还输入了 javascript: label…

最后，<button>s 并没有真正使用 value 属性。他们的标签内容已经有点价值了。

<form id="registerForm" class="content formregister" method="POST" action="db/registerinsert.php">
  <!-- Omitting stylistic containers -->
  <input id="username" name="username" class="input" type="text" required="required">
  <button class="button is-link" type="submit">Submit</button>
</form>

备选方案：`reportValidity` 和 `checkValidity`

您添加了 required 属性。使用它的方法是在表单上调用 reportValidity or checkValidity。请注意，截至 2021 年，这些方法还没有完全的浏览器支持。

document.getElementById("registerForm").addEventListener("submit", (event) => {
  if(!event.target.reportValidity()){
    event.preventDefault();
  }
});

使用 reportValidity，浏览器 UI 如果它是空的，就会显示类似“请填写此字段”的消息。类似的方法 checkValidity 也会在 JS 中以相同的方式工作，但不会向用户显示消息，因此您的自定义 alert 可以重新引入。

请参阅 form validation and constraint validation for more, e.g. setting patterns 上的 MDN 文章。

选择：`requestSubmit`

有一个名为 requestSubmit 的新 API，它简化了表单验证，但截至 2021 年还没有得到很好的支持。这依赖于 required 属性。

document.querySelector("registerForm button[type='submit']")
  .addEventListener("click", ({target}) => target.form.requestSubmit(target));

<form id="registerForm" class="content formregister" method="POST" action="db/registerinsert.php">
  <!-- Omitting stylistic containers -->
  <input id="username" name="username" class="input" type="text" required="required">
  <button class="button is-link" type="submit">Submit</button>
</form>

上面的JS也用了destructuring assignment and the form property.

为什么这个表单验证似乎绕过了 `event.preventDefault();`？

Why does this form validation appear to bypass `event.preventDefault();`?

html

javascript

jquery

html5-formvalidation

`<input>`值

比较

事件对象

正确的事件类型和事件目标

命名约定

绑定事件，汇集一切

备选方案：`reportValidity` 和 `checkValidity`

选择：`requestSubmit`

为什么这个表单验证似乎绕过了 `event.preventDefault();`？

Why does this form validation appear to bypass `event.preventDefault();`?

html

javascript

jquery

html5-formvalidation

<input>值

比较

事件对象

正确的事件类型和事件目标

命名约定

绑定事件，汇集一切

备选方案：reportValidity 和 checkValidity

选择：requestSubmit

`<input>`值

备选方案：`reportValidity` 和 `checkValidity`

选择：`requestSubmit`