在前端开发中，表单验证是一个比较基础的需求，往往需要考虑很多因素，如输入格式的验证、必填项的限制、以及异步验证等等。如果能使用一个成熟、稳定的 npm 包来解决这些问题，那么开发效率和代码质量必将大大提高。本文介绍一款开源的 npm 包——ct-form，它可以帮助你快速构建复杂的表单验证功能。

ct-form 的安装与引入

安装 ct-form 的方式很简单，直接使用 npm 安装即可：

npm install ct-form --save

在引入 ct-form 之前，我们需要事先引入 jQuery，因为 ct-form 底层使用了 jQuery。通过 script 标签引入 jQuery 的方法如下：

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

接下来，我们在代码中引入 ct-form：

import ctForm from 'ct-form';

ct-form 基础使用

ct-form 的基础使用方法如下：

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

上面的代码创建了一个表单验证实例 form，将实例与表单元素绑定。同时，传入了一个 rules 对象，其中定义了每个表单项需要进行的验证规则。

ct-form 支持的验证规则

以下是 ct-form 支持的验证规则：

规则	说明
required	必填项
max	最大长度
min	最小长度
email	邮箱格式
url	URL 格式
equalTo	两次输入项必须相同
remote	异步验证
regex	对输入内容进行正则匹配验证

ct-form 高级特性

表单验证及提示

ct-form 在表单验证时提供了丰富的提示信息，包括表单项的错误信息、表单的全局错误信息等等，具体如下：

form.validate().then(() => {
  // 表单验证通过
}, (errors) => {
  // 表单验证失败
  console.error(errors);
});

添加自定义规则

如果需要支持一些非常规的验证规则，我们可以通过 ct-form 的下面两个 API 来添加自定义规则：

ctForm.addMethod(name, method, message);
ctForm.addClassRules(className, rules);

其中，addMethod 方法用来添加自定义的验证方法，addClassRules 方法用来扩展已有表单验证规则的自定义类规则。

示例代码

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

在上面的代码中，我们给出了一个完整的 ct-form 示例，包括表单元素的 HTML、ct-form 的配置和各种回调函数的用法，可以根据自己的需求进行修改、扩展。当用户在表单中输入不符合要求的内容时，会在输入项的下方显示对应的错误提示信息。

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

npm 包——ct-form 的使用教程