基于 Web Components 的表单校验组件实现技巧与落地经验分享-JavaScript中文网-JavaScript教程资源分享门户

前言随着互联网的飞速发展，表单组件作为用户和网站交互的重要界面元素，其校验和交互能力越来越受到关注。本文介绍一种基于Web Components的表单校验组件实现技巧与落地经验。希望能对前端工程师有所帮助。

Web Components介绍

Web Components是目前Web发展的一个方向，主要是为了让Web开发更加模块化、可复用、封装性更强。Web Components由一组技术构成，包括自定义元素、Shadow DOM、HTML Templates及HTML Imports等。它的优点主要有三个：

可重用性：Web Components可以像浏览器内置的标签一样使用。
封装：Web Components的结构与交互效果都可以封装，不会被其它元素或样式影响。
独立：Web Components可以独立存在于任何环境中，各个Web Components之间也是独立的。

表单校验组件实现技巧

基于Web Components的表单校验组件通常包含了三个重要的组成部分，分别是模板、脚本和样式。

模板

由于Web Components要拥有可供开发者使用的自定义标签名字，而这些自定义标签名字就是通过HTML Templates实现的。开发者通过HTML定义组件的结构，封装相应的数据，传递从父元素传递进来的数据、事件等，从而完成组件的定义。

示例代码：

// javascriptcn.com 代码示例
<template id="form-template">
  <form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Password</label>
    <input type="password" id="password" name="password" required minlength="6">

    <button type="submit">Submit</button>
  </form>
</template>

脚本

Web Components脚本是用来定义自定义元素的行为。示例代码：

// javascriptcn.com 代码示例
class FormValidator extends HTMLElement {
  constructor() {
    super();
    // 判断表单是否有效
    this.isValid = false;

    // 添加表单校验事件监听
    this.addEventListener('submit', this.validateForm.bind(this));
  }

  connectedCallback() {
    // 获取模板
    const template = document.getElementById('form-template');
    const clone = document.importNode(template.content, true);
    // 将模板内容添加到自定义元素中
    this.appendChild(clone);
  }

  // 表单校验事件处理
  validateForm(event) {
    // 停止form的提交事件
    event.preventDefault();

    const form = event.target;
    // 获取所有input元素
    const inputs = form.querySelectorAll('input');

    this.isValid = true;
    // 循环遍历校验表单
    inputs.forEach(input => {
      // 输入校验
      if (!input.checkValidity()) {
        this.isValid = false;
        // 显示错误信息
        this.showError(input, input.validationMessage);
      } else {
        // 隐藏错误信息
        this.hideError(input);
      }
    });

    if (this.isValid) {
      // 表单校验成功后，执行提交动作
      form.submit();
    }
  }

  // 显示错误信息
  showError(input, message) {
    const errorEl = this.querySelector(`#${input.id}-error`);
    if (errorEl) {
      errorEl.style.display = 'block';
      errorEl.textContent = message;
    }
  }

  // 隐藏错误信息
  hideError(input) {
    const errorEl = this.querySelector(`#${input.id}-error`);
    if (errorEl) {
      errorEl.style.display = 'none';
      errorEl.textContent = '';
    }
  }
}

// 声明自定义元素
window.customElements.define('form-validator', FormValidator);

样式

Web Components的样式是同样被封装起来，不会被外部样式所影响，使得开发者可以保证组件可以独立存在。示例代码：

// javascriptcn.com 代码示例
form-validator input:invalid {
  border-color: #f00;
}

form-validator label {
  display: block;
}

form-validator button {
  margin-top: 1em;
}

form-validator .error {
  color: #f00;
  font-size: 0.9em;
  margin-top: 0.5em;
  display: none;
}

组件的调用方式

Web Components的调用方式比较简单，开发者只需要在需要使用的HTML页面中引入组件的脚本，然后在HTML页面中添加自定义元素即可。

示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Web Component Form Validation Demo</title>
  <meta charset="utf-8">

  <script src="form-validator.js"></script>

  <style>
    form-validator {
      width: 300px;
      margin: auto;
    }
  </style>
</head>
<body>

  <h2>Web Component Form Validation Demo</h2>

  <form-validator>
  </form-validator>

</body>
</html>

总结

本文介绍了基于Web Components的表单校验组件实现技巧和落地经验，综合运用HTML Templates、Shadow DOM、HTML Import及Custom Elements等技术，为开发者提供了一种高度封装的组件化开发思路，同时也提升了Web开发的可重用性、封装性和独立性，希望对大家有帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6583a366d2f5e1655de7b7f8