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中文網其他相關文章!