資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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”事件。此事件在提交表單時，對於列出任何與表單相關的錯誤非常有用。每個無效的表單控制元件在表單提交時都會收到一個無效事件。
以下是 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 次瀏覽
廣告