3

只有一些 HTMLElements 支持约束验证 api（例如，HTMLButtonElement）。我想创建一个自定义 Web 组件，它也支持约束验证 api。

下面给出了期望结果的示例：

<form>
  <input name="title" required>
  <custom-form-component></custom-form-component>
</form>
<script>
  const form = document.querySelector('form');
  form.checkValidity();
</script>

custom-form-component可以调用setCustomValidity自身（基于相应的用户输入上下文）并验证自身的真假。因此，对 的调用form.checkValidity()应该根据 的结果返回真或假custom-form-component。

正如我从文档中发现的那样（例如在 MDN 上），只有某些元素可以附加影子根。表单元素是不可能的。但是，只有表单元素支持约束验证 api。

具体问题：如何实现支持约束验证api的自定义Web组件？

4

1 回答 1

5

这是对 Web 组件的新介绍。截至 2019 年 9 月 25 日，只有 Chrome 76 支持它。

这是 Google Web Devs 提供的一篇文章：

https://web.dev/more-capable-form-controls/

它讨论了对 Web 组件的各种添加，使它们可以正确地集成为表单元素。

这包括：

  1. 表单验证
  2. 和CSS伪:disabled类:invalid:valid
  3. formdata活动_
  4. 还有一个静态formAssociated属性，它告诉浏览器将您的元素视为表单控件。

加上其他一些东西，可以让您的控件在一个<form>

于 2019-09-25T19:53:06.677 回答