在前端开发中，表单验证是一个非常重要的环节，它能防止用户输入错误或者非法信息。而 Custom Elements 是一种比较新的 Web Components 标准，可以让我们创建自定义的 HTML 元素。下面将介绍如何在 Custom Elements 下进行表单验证。
Custom Elements
Custom Elements 允许我们创建自定义的 HTML 标签，这些标签可以拥有自定义的属性和方法。其实现的核心就是使用了 JavaScript 中的类和继承机制。我们可以使用 class 关键字来定义自定义元素，并通过继承 HTMLElement 类来继承所有的 HTML 特性和方法。例如：
----- ------------- ------- ----------- -
------------- -
--------
-
-这样我们便自定义了一个空的 HTML 标签，但是它并没有什么用处，因此我们需要给它添加一些自定义的方法。
表单验证
表单验证是页面上非常常见的需求，下面我们将介绍如何在 Custom Elements 下实现表单验证。
自定义属性
在 Custom Elements 中，我们可以通过自定义属性来存储表单验证的相关状态。例如，我们可以定义一个名为 invalid 的属性来表示当前输入是否合法。
----- ------------- ------- ----------- -
------------- -
--------
------------- - ------ -- ----
-
--- --------- -
------ --------------
-
--- -------------- -
------------- - ------
-- --------------- -
------------------------------
- ---- -
---------------------------------
-
-
-上面的代码中，我们定义了一个名为 _invalid 的私有属性，用来存储输入是否合法。我们通过 get 和 set 方法来操作这个属性，同时当 _invalid 发生变化时，我们利用 classList 添加或者移除 invalid 类名，以达到样式的改变。
自定义方法
当用户输入一个表单时，我们需要对其进行验证，如果输入的信息不符合要求，我们需要给出提示信息。为了做到这一点，我们可以定义一个 validate 方法，这个方法可以接受用户输入的信息，并进行相关的验证。
例如，我们可以定义一个方法来判断当前输入是否为手机号码：
----- ------------- ------- ----------- -
------------- -
--------
------------- - ------ -- ----
-
--- --------- -
------ --------------
-
--- -------------- -
------------- - ------
-- --------------- -
------------------------------
- ---- -
---------------------------------
-
-
--------------- -
-- ------ -- --------------------------------- -
------------ - -----
------ ------------
-
------------ - ------
------ ---
-
-上面的代码中，我们定义了一个 validate 方法，这个方法接受用户输入的信息，并对其进行验证。如果输入的手机号码格式不正确，则返回一个提示信息，并设置为输入不合法。否则，输入合法，并将 invalid 设置为 false。
事件绑定
当用户输入完成时，我们需要将用户输入的信息传递给 validate 方法进行验证。为了做到这一点，我们可以使用 addEventListener 方法监听 input 事件。当输入完成时，我们调用 validate 方法进行验证并显示提示信息。
例如，我们可以定义一个组件来验证用户输入的手机号码：
----- ---------- ------- ----------- -
------------- -
--------
---------------- - ---
------------ - --------------------------------
-------------------------------------- -- -- -
----- ----- - -------------------
----- ------- - ---------------------
-- --------- -
------------------------ - --------
- ---- -
------------------------ - ---
-
---
-------------- - ------------------------------
-------------------------------
---------------------------------
-
--------------- -
-- ------ -- --------------------------------- -
--------------------------------------
------ ------------
-
-----------------------------------------
------ ---
-
-
------------------------------------ ------------上面的代码中，我们定义了一个 PhoneInput 组件，它继承自 HTMLElement。在构造函数中，我们创建了一个 input 元素和一个 message 元素，并监听了 input 事件。当用户输入完成后，我们调用 validate 方法进行验证，并将验证结果显示在 message 元素中。
结论
通过以上的介绍，我们可以发现，在 Custom Elements 下进行表单验证并不是很困难。我们只需要定义一些自定义属性和方法，并添加一些事件监听即可。同时，我们还可以让自定义元素拥有更加强大的功能，这样可以极大地提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6739a2ceea7efe878f3e5ad8