資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML5 中使用 required 屬性和自定義驗證訊息
HTML5 包含許多內建的表單驗證功能，允許開發者輕鬆地向表單新增驗證。其中一項功能是“required”屬性，它指定輸入欄位是必需的，並且必須在提交表單之前填寫。
“required”屬性是一個布林屬性。如果表單中存在任何帶有“required”屬性的輸入欄位，則必須在提交表單之前填寫該欄位。
如果在提交表單之前該特定欄位為空，則使用者將看到瀏覽器發出的錯誤訊息，告知他們該輸入欄位是必需的。
使用“required”屬性
要使用“required”屬性，只需將其新增到要設定為必需的輸入欄位中即可：
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required>
</form>
</body>
</html>
瀏覽器將在提交表單之前驗證輸入欄位是否已填寫，如果未填寫，則會顯示錯誤訊息。根據瀏覽器的不同，預設錯誤訊息可能有所不同，但通常會說明該欄位是必需的。
自定義驗證訊息
我們還可以透過指定一個唯一的訊息來更改無效輸入的訊息，該訊息將在欄位無效時傳送給使用者。我們可以使用“title”屬性更改預設的驗證訊息：
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" required title="Please enter your name">
</form>
</body>
</html>
如果在提交表單時輸入欄位為空，則此程式碼將向用戶顯示訊息“請輸入您的姓名”。
除了“title”屬性之外，HTML5 還提供了“pattern”元素，允許開發人員指定輸入必須匹配的正則表示式，以便在每次填寫表單時進行驗證。如果輸入不符合所需的模式，使用者將看到瀏覽器發出的錯誤訊息。
示例
以下是如何使用“pattern”屬性指定輸入欄位的最小長度的示例：
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
</form>
</body>
</html>
如果輸入不符合此條件，則將顯示訊息“請輸入至少 3 個字元”。此程式碼要求輸入欄位包含至少 3 個字元。
自定義錯誤訊息樣式
可以使用 CSS 更改錯誤訊息的外觀。錯誤訊息預設情況下作為一個小文字節點新增到輸入欄位中，並以紅色字型顯示。但是，我們可以使用 CSS 修改錯誤訊息的外觀並控制其顯示方式。
可以使用“:invalid”偽類在輸入欄位無效時選擇它，並使用 CSS 屬性更改錯誤訊息的樣式。
示例
以下是如何使用 CSS 自定義錯誤訊息樣式的示例：
<html>
<style>
input:invalid {
border: 2px solid red;
}
input:invalid + span {
color: red;
font-weight: bold;
}
</style>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
</form>
</body>
</html>
當輸入欄位無效時，此程式碼將使其邊框變為紅色，並顯示一個粗體紅色錯誤訊息。
使用 JavaScript 自定義錯誤訊息
除了使用 CSS 之外，我們還可以使用 JavaScript 自定義錯誤訊息並控制其顯示方式。
要使用 JavaScript 自定義錯誤訊息，我們可以使用“setCustomValidity”方法，該方法允許我們為輸入欄位指定自定義錯誤訊息。
示例
以下是如何使用“setCustomValidity”方法設定自定義錯誤訊息的示例：
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="InputField" type="text" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
const txt = document.getElementById("InputField").value;
console.log(txt);
const txtLen = txt.length;
console.log(txtLen);
if (txtLen<3) {
document.getElementById("demo").innerHTML = "Must be atleast 3 characters";
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
</body>
</html>
此程式碼將輸入欄位的錯誤訊息設定為“請輸入有效值”。
結論
在這篇文章中，我們探討了如何將個性化的驗證訊息與 HTML5 的“required”元素結合使用。我們討論了表單驗證的基礎知識、“required”標籤以及如何使用 JavaScript 和 CSS 來個性化驗證訊息。
開發人員可以透過利用“required”元素並自定義驗證訊息，輕鬆地向其 HTML5 表單新增表單驗證，並確保使用者提供了必要的資訊。表單驗證是保證使用者輸入的準確性和完整性的重要工具，許多 Web 應用程式都依賴於它。
18K+ 瀏覽量
