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

编程问答 2022-05-25

问题描述

我正在尝试编写一个带有一些基本验证的简单表单，但是按下提交按钮会绕过 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>

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

解决方法

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

  • 错误地检索 <input> 值
  • 未监听 submit 事件

但使用过时的特性，如全局 event 或使用 onclick 属性最终也会导致麻烦。

<input> 值

<input> 元素没有 val 方法。不要将 jQuery 与 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。 It’s not recommended。请改用 event argument。见What exactly is the parameter e (event) and why pass it to JavaScript functions?。

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

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

命名约定

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

绑定事件并将所有内容整合在一起

内联事件处理程序如 onclick 或 onsubmit 是 not recommended。它们是一种注册事件的 obsolete,hard-to-maintain and unintuitive 方式。始终使用 use addEventListener 或 jQuery 的 .on。

这是使用原生 DOM API 的事件绑定。它还使用 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> 并没有真正使用 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 或 checkValidity。请注意，截至 2021 年，这些方法尚不具备完整的浏览器支持。

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

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

有关更多信息，请参阅关于 form validation 和 constraint validation 的 MDN 文章，例如设置 patterns。

替代方案：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 和 the form property。

,

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

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

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

希望能帮到你

htmlhtml5-formvalidationjavascriptjquery