如何在 HTML 表單中自訂驗證訊息？

HTML 表單的自訂驗證訊息

在HTML 表單中，當REQUIRED 欄位留空時，通常會出現一則預設訊息： 「請填寫此欄位。」可以自訂，以提供更具體且用戶友好的錯誤訊息。

更改預設錯誤訊息

要更改預設錯誤訊息，請使用 setCustomValidity()方法。例如，要將id 為“username”的輸入欄位的錯誤訊息設定為“此欄位不能留空”，請新增下列程式碼：

<input type="text">

隱藏錯誤訊息

使用者在欄位中輸入資料後，錯誤訊息應該被隱藏。這可以透過使用oninput 事件處理程序將錯誤訊息設為「」來完成：

oninput="this.setCustomValidity('')"

注意： 內聯事件處理程序不需要「this」關鍵字，但可以使用用於保持一致性。

範例

以下程式碼示範了使用offsetCustomValidity()提供自訂錯誤訊息並在使用者輸入新資料時隱藏它：

<form>

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