HTMLButtonElement: reportValidity() 方法

基线 广泛可用

此功能已十分成熟，并在许多设备和浏览器版本中有效。它从 2018 年 12 月.

报告反馈

语法

js
reportValidity()

参数

无。

返回值

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

示例

这个牵强附会的例子展示了如何使按钮无效。

HTML

我们创建一个仅包含几个按钮的表单

html
<form action="#" id="form" method="post">
  <p>
    <input type="submit" value="Submit" />
    <button id="example" type="submit" value="fixed">THIS BUTTON</button>
  </p>
  <p>
    <button type="button" id="report">reportValidity()</button>
  </p>
</form>

<p id="log"></p>

CSS

我们添加一些 CSS，包括按钮的 :valid 和 :invalid 样式

css
input[type="submit"],
button {
  background-color: #33a;
  border: none;
  font-size: 1.3rem;
  padding: 5px 10px;
  color: white;
}
button:invalid {
  background-color: #a33;
}
button:valid {
  background-color: #3a3;
}

JavaScript

我们包含一个函数来切换示例按钮的值、内容和验证消息

js
const reportButton = document.querySelector("#report");
const exampleButton = document.querySelector("#example");
const output = document.querySelector("#log");

reportButton.addEventListener("click", () => {
  const reportVal = exampleButton.reportValidity();
  output.innerHTML = `reportValidity returned: ${reportVal} <br/> custom error: ${exampleButton.validationMessage}`;
});

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

exampleButton.addEventListener("click", (e) => {
  e.preventDefault();
  if (exampleButton.value == "error") {
    breakOrFixButton("fixed");
  } else {
    breakOrFixButton("error");
  }
  output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
});

const breakOrFixButton = () => {
  const state = toggleButton();
  if (state == "error") {
    exampleButton.setCustomValidity("This is a custom error message");
  } else {
    exampleButton.setCustomValidity("");
  }
};

const toggleButton = () => {
  if (exampleButton.value == "error") {
    exampleButton.value = "fixed";
    exampleButton.innerHTML = "No error";
  } else {
    exampleButton.value = "error";
    exampleButton.innerHTML = "Custom error";
  }
  return exampleButton.value;
};

结果

按钮默认情况下是有效的。激活 "THIS BUTTON" 会更改值、内容并添加自定义错误消息。激活 "reportValidity()" 按钮会检查按钮的有效性，如果按钮因消息而未通过约束验证，则向用户报告自定义错误消息并抛出 invalid 事件。

规范

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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅