类型错误：form.reset 不是 JavaScript 中的函数

TypeError: form.reset 不是 JavaScript 中的函数

TypeError: form.reset not a function in JavaScript

“form.reset is not a function”错误的发生有多种原因：

将表单元素的nameor属性设置为id"reset"
reset()在元素集合而不是表单元素上调用该方法。
在调用重置时放置第二组括号，例如reset()().

typeerror form reset 不是函数

如果您使用 jQuery 并收到错误“$(…).reset 不是一个函数”，您可能试图在reset元素集合上调用该方法，而不是在表单元素上调用它。

索引.js


const form = document.getElementById('create_user_form');

function handleSubmit(event) {
  event.preventDefault();

  console.log($('#create_user_form')); // 👉️ [form#create_user_form]

  // ✅ Works because we call `reset` on `form` element
  $('#create_user_form')[0].reset();
}

form.addEventListener('submit', handleSubmit);

请注意，我们必须访问索引处的元素0以选择我们可以在其上调用该reset方法的表单元素。如果我们在集合上调用该方法，就会出现错误。

下面是错误如何在 JavaScript 中发生的示例。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <form id="create_user_form">
      <input type="text" name="first_name" />

      <!-- ⛔️ has id and name set to "reset" -->
      <input type="reset" id="reset" name="reset" />

      <input type="submit" />
    </form>

    <!-- ✅ load jQuery (optional) ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

请注意，该input元素的id和name属性设置为
"reset"– 这是错误的原因。

这是相关的 JavaScript 代码。

索引.js


const form = document.getElementById('create_user_form');

function handleSubmit(event) {
  event.preventDefault();

  console.log(form.reset); // 👉️ input#reset

  // ⛔️ TypeError: form.reset is not a function
  form.reset();
}

form.addEventListener('submit', handleSubmit);

在我们的代码中实际发生的是我们将的值覆盖为form.reset字段引用而不是方法，因为我们已将id属性设置为
"reset"。

当您使用 console.logform.reset时，它应该是一个函数而不是对表单中字段的引用。

同样，当您console.log调用
reset()
方法的值时，您应该会看到一个HTMLFormElement被打印到控制台。

要解决该错误，请重命名或删除id和name属性以使其不设置为"reset"。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <form id="create_user_form">
      <input type="text" name="first_name" />

      <!-- ✅ renamed `id` and `name` to NOT be "reset" -->
      <input type="reset" id="resetBtn" name="resetBtn" />

      <input type="submit" />
    </form>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在，如果您运行相同的 JavaScript 代码，一切都会按预期运行。

索引.js


const form = document.getElementById('create_user_form');

function handleSubmit(event) {
  event.preventDefault();

  console.log(form.reset); // 👉️ reset() {}

  // ✅ Works
  form.reset();
}

form.addEventListener('submit', handleSubmit);

请注意，的值form.reset是一个函数，而不是对具有input重置类型的字段的引用。

如果您仍然遇到错误，请确保在调用reset表单上的方法时没有第二组括号，例如并确保您没有拼错。 form.reset()() reset

在极少数情况下，您可能无法更改或删除id和
name属性。在这种情况下，您可以调用接口reset上的方法
。HTMLFormElement

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <form id="create_user_form">
      <input type="text" name="first_name" />

      <!-- ⛔️ has id and name set to "reset" -->
      <input type="reset" id="reset" name="reset" />

      <input type="submit" />
    </form>

    <!-- ✅ load jQuery (optional) ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const form = document.getElementById('create_user_form');

function handleSubmit(event) {
  event.preventDefault();

  console.log(form.reset); // 👉️ input#reset

  // ✅ Works
  HTMLFormElement.prototype.reset.call(form);
}

form.addEventListener('submit', handleSubmit);

即使访问元素reset上的属性form指向
reset输入元素而不是方法，我们仍然可以通过访问界面reset上的属性来重置表单。HTMLFormElement

–