如何自訂 HTML 表單驗證錯誤訊息？

自訂 HTML 表單的驗證訊息

驗證 HTML 表單時，預設錯誤訊息可能不提供資訊或令人困惑。為了增強用戶體驗，您可以自訂這些訊息，以實現更清晰、更有意義的互動。

如何更改預設驗證訊息：

HTML5 驗證 API 提供了名為 setCustomValidity() 的方法，它允許您為無效輸入指定自訂錯誤訊息。

例如，提供的 HTML 表單包含輸入具有必需屬性的使用者名稱和密碼欄位。預設情況下，提交帶有空欄位的表單會觸發瀏覽器顯示訊息「請填寫此欄位」。若要自訂此訊息，可以使用 setCustomValidity():

<input type="text">

這裡，當輸入欄位無效時會觸發 oninvalid 屬性，設定自訂錯誤訊息。 oninput 屬性很重要，因為它會在使用者輸入新資料時重置錯誤訊息，從而改善使用者體驗。

自訂密碼欄位錯誤：

在提供的範例中，密碼欄位的預設錯誤為*。這可以透過處理 JavaScript 中的驗證來更改。操作方法如下：

function login() {
  let username = document.getElementById("username");
  let password = document.getElementById("pass");

  if (username.value === "" || password.value === "") {
    alert("Please fill out both fields");
    return false;
  }
}

在這種情況下，提交空白用戶名或密碼會觸發警報功能，顯示自訂的錯誤訊息。

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