当 HTML 元素无效时执行脚本?

htmlweb developmentfront end technology更新于 2024/8/10 0:44:17

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

HTML <form> 元素

为了收集用户输入，我们使用 HTML 表单。通常情况下，服务器会处理用户输入。

<form>
…….
</form>

HTML <input> 标签

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

<form>
   <input type= ".." id= ".." >
</form>

当可提交的 <input> 元素无效时，会触发 HTML 中的"oninvalid"事件。提交表单时，此事件可能有助于列出任何与表单相关的问题。每个无效的表单控件在提交表单时都会收到一个 invalid 事件。

以下是在 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>

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

当用户尝试在未输入详细信息的情况下提交表单时，将触发该事件并显示警报。