前言
表单验证是我们前端开发者经常遇到的一个问题，而默认的表单验证方式通常不能满足所有的需求，例如需要自定义的验证规则或者显示方式。这时候，我们就需要使用自定义表单验证组件来实现更灵活的验证功能。
这篇文章将会介绍如何使用 Custom Elements 来实现自定义的表单验证组件，让你可以更加灵活地实现表单验证。
Custom Elements 简介
在介绍如何实现自定义表单验证组件之前，我们需要先了解一下 Custom Elements。
Custom Elements 是一个 Web Components 的规范，可以用来自定义 HTML 元素。通过这个规范，我们可以定义一个自定义的 HTML 元素，并且可以将其添加到 HTML 文档中以供使用。
Custom Elements 的实现分为两个步骤：
- 定义 Custom Element，包括元素的名称、样式和行为
- 注册 Custom Element，使其可以被 HTML 文档使用
实现自定义表单验证组件
下面我们将演示如何使用 Custom Elements 来实现自定义的表单验证组件，并且在其中应用一些验证规则。
定义 Custom Element
首先，我们需要定义一个 Custom Element，在该元素中定义该元素所需要的属性和方法。
在这个例子中，我们定义一个名为 my-validation 的 Custom Element，并提供了以下功能：
- 允许给 Custom Element 添加一个
validate方法，用来自定义验证规则 - 允许给 Custom Element 添加一个
message方法，用来自定义错误信息
-- -------------------- ---- ------- --------- ---------------------------- ------- -- ---- -- -------- ------ ----------- -- ----------- -------- ----- ------------ ------- ----------- - ------------- - -------- ------------------- ----- ------ --- -- ----------------- ----- -------- - -------------------------------------------------- ----- ----- - --------------------------------- ----- ----- - ----------------------------- ------------------------------ -------------------------- ----------------------------------- - ---------- - ----- ----- - --------------------------------------- -- ----------- ----- ------- - ------------------ -- -- -- --------- - ---------------------------- ---------------------- - --- - ---- - ---------------------------------------- ---------------------- - ------ - - --------- - ------ ------------- - - -------------------------------------- -------------- ---------展开代码
在上面的代码中，我们用 class 关键字定义了一个名为 MyValidation 的 Custom Element，并且在构造函数中生成了一个 Shadow DOM，然后将从 <template> 中克隆出来的内容附加到其中，并在输入框的 blur 事件中调用了 validate 方法进行验证。
其中 setCustomValidity 方法是 HTML5 标准中用于设置自定义错误消息的一个方法，这个消息可以在验证失败的时候显示给用户。
注册 Custom Element
在定义好 Custom Element 后，我们需要将其注册到系统中，以使其可以在 HTML 中进行使用。
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- -------- ------------ ----- ---------------- ------- ------ ------------------------------- ------------------------------- ------- ------------------------ ------- -------展开代码
在 HTML 文件中使用该元素时，我们把 <my-validation> 标签写到了 HTML 中，并向其执行注册操作，这样就可以使用自定义的表单验证组件了。
结语
本篇文章介绍了如何使用 Custom Elements 来实现自定义的表单验证组件，并演示了如何加入自定义验证规则，让表单验证更加灵活。Custom Elements 还可以实现其他一些自定义 HTML 元素的功能，有兴趣的读者可以了解更多资料进行学习。
完整代码可以在 Github 仓库 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7e579306f20b3a6530cf4
