javascript - 如何使 HTML 表单验证自定义 HtmlInputElement？

Question

我想使用自定义模板创建自定义输入元素并拥有原生 HTML <form>像对待其他 native 输入元素一样尊重它。例如，当元素无效并且用户尝试提交表单时，浏览器将触发自定义元素上的验证逻辑并阻止提交并显示错误。此外，当表单被提交或序列化时，自定义元素的值也包括在内。

我已经使用“is”属性和一个扩展 HtmlInputElement 的自定义类。对象，但我似乎无法使用此方法使用自定义模板。

如果可能的话，我该怎么做呢？

欢迎使用纯 JavaScript 和 Polymer 的示例。

Answer 1

需要理解的一个限制:在跨浏览器实现的自定义元素的当前 v1 版本中(而不是肯定不会在未来跨浏览器实现的遗留 v0 版本)，自定义元素类只能扩展 HTMLElement .

因此向 customElements.define 提供一个扩展 HtmlInputElement 的类将失败。

(综上所述，除非如上评论所述，否则您使用 polyfill。)

但是为了更好地回答关于制作扩展 input 的特定问题，请参阅 Custom input element in native form 处的答案。 .