HTMLInputElement: reportValidity() 方法

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本中使用。它已在浏览器中可用，自 2018 年 12 月.

reportValidity() 方法是 HTMLInputElement 接口的方法，它执行与 checkValidity() 方法相同的有效性检查步骤。此外，如果 invalid 事件未被取消，浏览器会将问题显示给用户。

语法

js
reportValidity()

参数

无。

返回值

如果元素的值没有有效性问题，则返回 true；否则，返回 false。

示例

基本用法

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 事件。

js
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 中添加了一个“修复我”按钮。

html
<button type="button" id="fix">Fix issues</button>

JavaScript

我们扩展了上面基本示例中的 JavaScript，添加了一个函数，该函数使用 HTMLInputElement.setCustomValidity() 方法提供自定义错误消息。validateAge() 函数仅在输入有效且 enableValidation 变量为 true 时将错误消息设置为空字符串，其中 enableValidation 在“修复问题”按钮被激活之前为 false。

javascript
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}"`;
  }
});

const validateAge = () => {
  const validityState_object = ageInput.validity;
  if (validityState_object.valueMissing) {
    ageInput.setCustomValidity("Please set an age (required)");
  } else if (ageInput.rangeUnderflow) {
    ageInput.setCustomValidity("Your value is too low");
  } else if (ageInput.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 事件，并将问题报告给用户，显示自定义错误消息“请设置年龄（必填）”。只要设置了自定义错误消息，激活“reportValidity()”按钮就会继续显示错误，即使您选择了有效年龄也是如此。要启用验证，我们必须将自定义错误消息设置为空字符串，这可以通过单击“修复问题”按钮来完成。

规范

规范
HTML 标准
# dom-cva-reportvalidity-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅