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 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告