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 上查看此页面 • 报告此内容的某个问题