HTMLInputElement: reportValidity() 方法

Baseline 已廣泛支援

此功能已成熟，並可在許多裝置和瀏覽器版本上執行。自 2018 年 12 月起，所有瀏覽器均支援此功能。

HTMLInputElement 介面的 reportValidity() 方法執行與 checkValidity() 方法相同的有效性檢查步驟。此外，如果 invalid 事件未被取消，瀏覽器就會向用戶顯示問題。

語法

reportValidity()

示例

基本用法

HTML

我們包含一個包含必填數字欄位的表單和兩個按鈕：一個用於檢查表單，另一個用於提交表單。

html

<form action="#" method="post">
  <p>
    <label for="age">Your (21 to 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Submit</button>
    <button type="button" id="report">reportValidity()</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

當“reportValidity()”按鈕被啟用時，我們使用 reportValidity() 方法來檢查輸入的值是否滿足其約束。我們記錄返回值。如果返回 false，我們還會顯示驗證訊息並捕獲 invalid 事件。

const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");

ageInput.addEventListener("invalid", () => {
  console.log("Invalid event fired.");
});

reportButton.addEventListener("click", () => {
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

結果

當返回 false 時，如果值缺失、小於 21、大於 65 或其他方面無效，則會出現錯誤訊息，觸發 invalid 事件，並將該 invalid 事件記錄到控制檯。

自定義錯誤訊息

本示例演示了自定義錯誤訊息如何在值有效時導致返回 false。

HTML

我們在上一個示例的 HTML 中添加了一個“Fix me”按鈕。

<form action="#" method="post">
  <p>
    <label for="age">Your (21 to 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Submit</button>
    <button type="button" id="report">reportValidity()</button>
    <button type="button" id="fix">Fix issues</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

我們擴充套件了上面基本示例的 JavaScript，添加了一個使用 HTMLInputElement.setCustomValidity() 方法來提供自定義錯誤訊息的函式。validateAge() 函式僅在輸入有效且 enableValidation 變數為 true 時將錯誤訊息設定為空字串，而 enableValidation 在“fix issues”按鈕被啟用之前一直為 false。

const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");
const fixButton = document.querySelector("#fix");
let enableValidation = false;

fixButton.addEventListener("click", (e) => {
  enableValidation = true;
  fixButton.innerHTML = "Error fixed";
  fixButton.disabled = true;
});

reportButton.addEventListener("click", () => {
  validateAge();
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

function validateAge() {
  const validityState = ageInput.validity;
  if (validityState.valueMissing) {
    ageInput.setCustomValidity("Please set an age (required)");
  } else if (validityState.rangeUnderflow) {
    ageInput.setCustomValidity("Your value is too low");
  } else if (validityState.rangeOverflow) {
    ageInput.setCustomValidity("Your value is too high");
  } else if (enableValidation) {
    // sets to empty string if valid AND enableValidation has been set to true
    ageInput.setCustomValidity("");
  }
}

結果

如果在輸入年齡之前啟用“reportValidity()”按鈕，reportValidity() 方法將返回 false，因為它不滿足 required 約束驗證。此方法會在輸入上觸發 invalid 事件，並向用戶報告問題，顯示自定義錯誤訊息“Please set an age (required)”。只要設定了自定義錯誤訊息，啟用“reportValidity()”按鈕將繼續顯示錯誤，即使您選擇了一個有效年齡。要啟用驗證，我們必須將自定義錯誤訊息設定為空字串，這可以透過點選“Fix issues”按鈕來完成。

規範

規範
HTML # dom-cva-reportvalidity-dev

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 10 月 1 日，由 MDN 貢獻者更新。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題