如何為空白欄位和密碼自訂 HTML 表單驗證訊息？

自訂 HTML 表單驗證訊息

提交包含空白欄位或無效欄位的表單時，瀏覽器通常會顯示一般錯誤訊息。為了增強用戶體驗，自訂這些訊息至關重要。本問題探討如何修改 HTML 表單中的預設驗證訊息，特別是空白欄位和密碼輸入欄位。

解決方案：

顯示自訂錯誤訊息對於空白輸入字段，請使用以下程式碼：

<input type="text" required placeholder="Enter Name"
       oninvalid="this.setCustomValidity('Enter User Name Here')"
       oninput="this.setCustomValidity('')"/>

關鍵元件是setCustomValidity( ) 方法，該方法設定自訂驗證元素的訊息。當輸入無效（例如，空）時，它會顯示自訂訊息。當使用者輸入新資料時，oninput 事件處理程序會刪除自訂訊息，從而增強使用者互動。

對於預設錯誤訊息是星號序列的密碼字段，您可以利用相同的 setCustomValidity() 方法。透過設定自訂錯誤訊息，瀏覽器將顯示您的訊息而不是星號。

附加說明：

• 內聯不嚴格要求 this 關鍵字事件處理程序，但使用它可以提高一致性和清晰度。
• 自訂驗證訊息透過提供清晰且具體的錯誤來增強使用者體驗訊息。
• 此方法適用於所有表單元素，允許完全自訂驗證回饋。

以上是如何為空白欄位和密碼自訂 HTML 表單驗證訊息？的詳細內容。更多資訊請關注PHP中文網其他相關文章！