資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中元素無效時執行指令碼？
在本文中，我們將討論如何在 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>
當指令碼執行時，它將生成一個輸出，其中包含一個用於輸入姓氏和名字的欄位以及用於選擇性別的單選按鈕，以及一個傳送按鈕。
如果使用者嘗試在不輸入詳細資訊的情況下提交表單，則會觸發該事件並顯示一個警報。
242 次檢視
