Custom Elements 如何实现表单验证-JavaScript中文网-JavaScript教程资源分享门户

在现代 web 应用开发中，表单是不可避免的一个组件。而表单验证是保证数据安全性和用户体验的重要步骤。传统的表单验证方式，使用 JavaScript 逐一对表单项进行验证，但这种方式不仅效率低下，而且容易出现代码冗余和错误。为了解决这个问题，开发者可以使用自定义元素（Custom Elements）来实现表单验证，从而极大地提高表单验证效率和代码可维护性。

自定义元素（Custom Elements）

自定义元素是 Web Components 的一个基础构建模块，它允许开发者自定义 HTML 元素，通过 JavaScript 来实现 HTML 元素的功能。

在自定义元素中，开发者可以使用 Shadow DOM 将元素内容隐藏，只留下一个占位符，同时还可以使用 JavaScript 来控制自定义元素的实现细节。自定义元素的使用方式类似于普通的 HTML 元素，只需要使用自定义的标签名即可。

实现表单验证

使用自定义元素实现表单验证的基本思路是，继承 HTMLInputElement 或 HTMLSelectElement 等原生元素，然后在继承的基础上添加验证逻辑，最后将扩展后的自定义元素作为表单控件使用。

继承原生元素

继承原生元素可以使用 JavaScript 中的类继承方式。

class ValidatedInput extends HTMLInputElement {
  ...
}

这里继承的是 HTMLInputElement，也就是 input 元素，开发者可以根据需要继承其他的表单元素，如 select，textarea 等。

添加验证逻辑

在继承原生元素的基础上添加表单验证逻辑，可以使用自定义元素的生命周期函数 connectedCallback，该函数会在元素被插入到文档后调用。在该函数中，添加监听事件，如 input，blur 等，对用户输入进行验证。

connectedCallback() {
  this.addEventListener('input', this._onInput.bind(this));
  this.addEventListener('blur', this._onBlur.bind(this));
}

其中 _onInput 和 _onBlur 分别是验证逻辑的两个处理函数。在处理函数中，通过 this.value 获取用户输入的值，然后进行验证，验证逻辑可以根据实际场景自行定义，比较常见的有非空验证，邮箱格式验证，手机号码格式验证等。

-- -------------------- ---- -------
--------- -
  -- ------------------ --- --- -
    -------------------------------
  - ---- -- ------------------------------------------------- -
    -------------------------------------
  - ---- -
    ---------------------------
  -
-

在验证逻辑中，如果验证不通过，可以使用 setCustomValidity() 方法来设置错误信息。当用户提交表单时，会自动调用该元素的 checkValidity() 方法，如果该方法返回 false，则表单提交被阻止，同时会显示出错误信息。

将扩展后的自定义元素作为表单控件

将扩展后的自定义元素作为表单控件，只需要像使用原生的表单控件一样使用即可，如下所示：

<form>
  <label>
    邮箱：
    <validated-input type="email"></validated-input>
  </label>
  <button type="submit">提交</button>
</form>

在实际使用中，开发者可以根据需要定制自己的验证逻辑，进一步提高表单验证效率和用户体验。

示例代码

下面是一个简单的实现示例：

-- -------------------- ---- -------
----- -------------- ------- ---------------- -
  ------------- -
    --------
  -

  ------------------- -
    ------------------------------ --------------------------
    ----------------------------- -------------------------
  -

  ---------- -
    ---------------------------
  -

  --------- -
    -- ------------------ --- --- -
      -------------------------------
    - ---- -- ------------------------------------------------- -
      -------------------------------------
    - ---- -
      ---------------------------
    -
  -
-

---------------------------------------- --------------- - -------- ------- ---

<form>
  <label>
    邮箱：
    <validated-input type="email"></validated-input>
  </label>
  <button type="submit">提交</button>
</form>

总结

自定义元素为实现表单验证提供了一种全新的方式，可以大幅提高表单验证效率和代码可维护性。在实际开发中，开发者可以根据需要扩展和优化自己的表单验证逻辑，保证数据安全性和用户体验，提升产品的竞争力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64802ebd48841e9894fad037