如何使用 preventDefault 重写而不是返回 false

How to rewrite using preventDefault instead of return false?

本文关键字：返回 false 何使用 preventDefault 重写      更新时间：2023-09-26

只是为了让我更好地理解如何编写 preventDefault 而不是返回 false。 下面是返回 false 的示例。 我想使用 preventDefault 重写此代码

我的网页：

<form name="myForm" action="formPracticePHP.php" method="post" onsubmit="return validateForm()">
    <p>Enter your Name: <input type="text" name="name" value="" placeholder="[your-name]" required="required" /><br /></p>
    <p>Enter your Age:  <input type="number" name="age" size="6" value="" /><br /></p>
    <p>Please Select Your Favorite Fruit</p>
    <select name="fruit" id="fruit">
       <option value="nothing" selected="selected">Select A Fruit</option>
       <option value="Bannana">Bannana</option>
       <option value="Kiwi">Kiwi</option>
       <option value="Mango">Mango</option>
       <option value="Apple">Apple</option>
       <option value="Cherry">Cherry</option>
    </select>
    <input type="submit" name="submit" value="submit" id="submitBtn" />  
</form>

我的JavaScript

function validateForm() {
   var x = document.forms["myForm"]["age"].value;
   var x2 = document.forms["myForm"]["fruit"].value;
      if ((x==null || x=="") || (x2 == null || x2=="nothing")) {
        alert("Age and fruit selection must be filled out");
        return false;
      }
}

您必须将event参数传递给处理程序

<form onsubmit="validateForm(event)" >

并更改您的功能

function validateForm(e) {
   var x = document.forms["myForm"]["age"].value;
   var x2 = document.forms["myForm"]["fruit"].value;
    if ((x==null || x=="") || (x2 == null || x2=="nothing")) {
         e.preventDefault();
         alert("Age and fruit selection must be filled out");
      }
}

如果您从 JavaScript 设置处理程序，上面的相同功能也可以工作。

假设validateForm已注册为表单的onsubmit处理程序，您应该能够执行以下操作：

function validateForm(e) {
   var x = document.forms["myForm"]["age"].value;
   var x2 = document.forms["myForm"]["fruit"].value;
   if ((x==null || x=="") || (x2 == null || x2=="nothing")) {
       alert("Age and fruit selection must be filled out");
       e.preventDefault(); // here    
   }
}

如果您在 HTML 中使用 onsubmit 属性来执行此操作，则可以删除return部分，并且需要将事件传递给它：

onsubmit="validateForm(event)"

但是，我强烈建议不要使用 HTML 属性来指定事件处理程序，而是使用 JavaScript 代码注册处理程序：

window.onload = function () {
    document.forms["myForm"].addEventListener("onsubmit", validateForm);
};
相关文章：