HTML 元素无效时如何执行脚本？

在本文中，我们将介绍如何在 HTML 元素无效时运行脚本。我们熟悉<input>标签和<form>元素。

HTML <form> 元素

HTML 表单用于收集用户输入。用户输入通常由服务器处理。

<form>
…….
</form>

HTML <input> 标签

<input>标签指定一个供用户输入数据的字段。<input>元素是最重要的表单元素。根据type属性的不同，<input>元素可以以多种不同的方式呈现。

<form>
   <input type= “..” id= “..” >
</form>

当可提交的<input>元素无效时，将触发 HTML 中的“oninvalid”事件。此事件在提交表单时，对于列出任何与表单相关的错误非常有用。每个无效的表单控件在表单提交时都会收到一个无效事件。

以下是 HTML 元素无效时执行脚本的示例。

示例 1：使用 HTML

在下面的示例中，我们使用 HTML 的oninvalid事件。

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="get">
      Name: <input type="text" oninvalid="alert('Fill The Form!');"
      Name="Firstname" required>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

执行上述脚本后，它将生成一个包含输入字段和提交按钮的输出。

如果用户尝试在不输入输入字段的情况下提交表单，则会触发该事件并显示警报。

示例 2：使用 Javascript

在下面的示例中，我们运行脚本以触发无效事件。

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="get">
      UserName: <input type="text" id="tutorial" Name="UserName" required><br>
      Password: <input type="password" name="password">
      <input type="submit" value="Submit">
   </form>
   <script>
      document.getElementById("tutorial").oninvalid = function() {mytutorial()};
      function mytutorial() {
         alert("Fill The Form!");
      }
   </script>
</body>
</html>

执行脚本后，将弹出一个窗口，显示用户名和密码的输入类型以及提交按钮。

如果用户尝试在不填写输入字段的情况下提交表单，则会触发该事件并显示警报。

使用 addEventListener() 方法

EventTarget 接口的 addEventListener() 方法创建一个函数，该函数将在每次将指定的事件发送到目标时调用。常见的目标包括 Element 或其子元素、Document 和 Window，但任何支持事件的对象都可以作为目标。

示例

在下面的示例中，我们使用 EventListener() 方法来触发无效事件。

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="post">
      <p>
         <label for="firstname">First name: </label>
         <input type="text" id="tutorial" name:"firstname" required><br>
         <label for="lastname">Last name: </label>
         <input type="text" id="lastname"><br>
         <input type="radio" name="sex" value="Male"> Male<br>
         <input type="radio" name="sex" value="Female"> Female<br>
         <input type="submit" value="Send">
      </p>
   </form>
   <script>
      document.getElementById("tutorial").addEventListener("invalid", mytutorial);
      function mytutorial() {
         alert("Fill The Form!");
      }
   </script>
</body>
</html>

执行脚本后，它将生成一个包含名字、姓氏输入字段和男女单选按钮以及发送按钮的输出。

如果用户尝试在不输入详细信息的情况下提交表单，则会触发该事件并显示警报。

更新于：2022年12月15日

242 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告