随着 web 应用程序的变得越来越复杂，表单验证变得越来越重要。为了保证用户输入的正确性，开发人员需要编写复杂的 JavaScript 代码来实现表单验证逻辑。同时，针对不同的浏览器，开发人员需要考虑兼容性问题，这也使得表单验证变得更加困难。
那么，如何才能更加轻松地开发跨浏览器的表单验证组件呢？ Custom Elements 可以帮助开发人员实现这一目标。
什么是 Custom Elements？
Custom Elements 是 Web Components 规范的一部分，它允许开发人员扩展 HTML 标签并在 DOM 中使用它们。这些自定义标签将具有自己的属性和方法，可以让开发人员实现自定义的页面组件。
通过使用 Custom Elements，开发人员可以对表单验证组件进行抽象，并将可重用的代码抽象为一组自定义标记，从而实现跨浏览器的表单验证组件。
构建表单验证组件
为了构建一个表单验证组件，您可以扩展 HTMLFormElement 标签并将其命名为自定义标记，例如 custom-form。 在 custom-form 中，您可以定义验证规则并在表单提交之前执行验证逻辑。
以下是一个使用 Custom Elements 构建的简单的表单验证组件示例：
<custom-form> <input type="text" name="name" required minlength="5" maxlength="20"> <input type="email" name="email" required> <input type="password" name="password" required> <button type="submit">Submit</button> </custom-form>
在 JavaScript 中定义 Custom Element 类
要使用 Custom Elements，您需要在 JavaScript 中定义类并扩展 HTMLElement。以下是一个示例类，其中定义了一个 CustomForm 类：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ----- ------ ---- ---------- ----- ----
-
-
------------------------------------ ----------- - -------- ------ ---在 connectedCallback 中，您可以定义表单验证逻辑。在本例中，我们将在稍后的部分中展示如何执行表单验证逻辑。
请注意，CustomForm 类不仅扩展了 HTMLElement，而且还需要传递第三个参数，其中 extends 属性指示 CustomForm 继承自原始的 form 元素。
获取表单元素并验证
在 connectedCallback 中，您可以获取表单元素并设置验证规则和错误消息。以下是一个示例实现：
-- -------------------- ---- -------
------------------- -
----- ---- - -----
----- ------ - ----------------------------- ------- -----------
-------------------- -- -
----- ------------ - -- -- ----------------------
--------------------------------- ----- -- -
-----------------------
-------------------------------
----- ------------ - -------------------------- -- ------------------------
-- ----- ------- ----- -------
---
------------------------------- ----- -- -
-- ------------------------------------- -
----------------------------------
-- ----- ---- ----- -------
-
---
---
------------------------------- ----- -- -
-----------------------
-- ----------------------- -
-- ----- ---- -- ------ ------ --- ----
- ---- -
-- ----- ---- -- -------
-
---
-在 connectedCallback 中，我们首先获取表单元素并添加 invalid 类以指示无效的输入。然后，我们使用 addEventListener 方法添加 invalid 事件和 input 事件监听器。
在 invalid 事件中，我们防止浏览器默认行为并在无效的输入上添加 invalid 类。然后，我们从输入的 data-error-message 属性或 validationMessage 属性中获取错误消息，并将其显示在页面上。
在 input 事件中，我们在输入为有效输入时清除错误消息。
最后，在 submit 事件监听器中，我们在表单验证成功时执行表单提交操作。
使用 Custom Form 标记验证表单
要使用自定义表单，您可以简单地将 custom-form 标记包装在 form 标记中，并设置表单元素的验证规则。当用户尝试提交该表单时，输入将保持被验证状态，并在无效的输入上添加invalid 类。当表单提交时，如果表单无效，则会显示错误消息。
<form is="custom-form"> <input type="text" name="name" required minlength="5" maxlength="20"> <input type="email" name="email" required> <input type="password" name="password" required> <button type="submit">Submit</button> </form>
结论
使用 Custom Elements 可以帮助开发人员构建跨浏览器的表单验证组件，使得表单验证更加方便和可重用。在本文中，我们探讨了以下几个要点：
- 什么是 Custom Elements
- 如何构建表单验证组件
- 如何使用 Custom Form 标记验证表单
通过对 Custom Elements 和表单验证逻辑的深入理解，你可以创建出更加复杂的、可重用的自定义页面组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6110ac5c563ced57f4982