使用 HTML5 中的自訂驗證訊息形成必需屬性
- WBOY轉載
- 2023-08-25 10:29:15675瀏覽
HTML5 包含許多內建的表單驗證功能，讓開發人員可以輕鬆地將驗證新增至其表單。這些功能之一是「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>
如果提交表單時輸入欄位留空，此程式碼將向使用者顯示訊息「請輸入您的姓名」。
為了指定每次填寫表單時輸入都必須符合的正規表示式，HTML5 除了「title」屬性之外還提供了「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「needed」元素結合。我們已經討論了表單驗證的基礎知識、「needed」標籤以及如何利用 JavaScript 和 CSS 來個性化驗證訊息。
開發人員可以快速將表單驗證新增至 HTML5 表單中，並透過利用「needed」元素並自訂驗證訊息來確保使用者已提供必要的資訊。許多 Web 應用程式都依賴表單驗證，因為它是保證使用者輸入的準確性和完整性的重要工具。
以上是使用 HTML5 中的自訂驗證訊息形成必需屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！