前言
在前端开发中，表单是一项经常需要处理和优化的工作。perfectform 是一个方便、易用的 npm 包，它为我们提供了一套完整的表单验证和提交处理方案，能够大大节省我们的开发时间，并提高表单的可用性和稳定性。本篇文章将为大家介绍如何使用 perfectform。
安装
使用 npm 进行安装
npm install perfectform --save
简介
perfectform 的主要功能有表单验证和提交处理。
表单验证
perfectform 提供了丰富的表单验证方法，可以满足大部分表单验证需求，包括：
- 必填项
- 邮箱、手机号、身份证号等格式验证
- 数字、整数等数据格式验证
- 最大长度、最小长度等长度验证
- 自定义正则验证
表单提交
perfectform 使用 AJAX 技术提交表单数据，并提供了以下优秀的功能：
- 支持文件上传和图片预览
- 支持多步提交
- 支持多重表单嵌套
- 支持提交前校验和提交成功失败提示
使用
表单验证
perfectform 的表单验证方法分为两类：全局验证和单个元素验证。
全局验证
全局验证是在表单提交前对整个表单进行验证。在实例化 perfectform 对象时，可以传入一个 options 对象，用于配置全局验证规则和错误提示。
-- -------------------- ---- -------
------ ----------- ---- --------------
----- ---- - ----------------------------------
----- ----- - --- ----------------- -
------ -
----- -
--------- -----
------- -
---- --
---- --
--
---- ------------------
--
------ -
------ ----
--
------ -
------- ----
-
--
--------- -
----- -
--------- --------
---- ---------
--
------ -
------ ---------
--
------ -
------- -----------
-
-
---这里的 rules 对象用于配置验证规则，messages 对象用于配置错误提示信息。上面的例子表示：
- name 等于必填项，长度在 2 到 20 之间，且只能包含英文字母
- email 等于邮箱格式
- phone 等于手机号码格式
如果表单验证失败，perfectform 会在提交按钮下面自动显示出失败原因。如果验证成功，表单将会被提交。
单个元素验证
perfectform 的单个元素验证方法包含四个字符：
data-required: 必填项，表单不能为空data-length: 长度验证，格式为data-length="min,max"，表示长度必须在 min 和 max 之间data-reg: 自定义正则验证，格式为data-reg="pattern"，其中 pattern 是自定义正则表达式字符串data-email: 邮箱格式验证data-mobile: 手机号码格式验证
单个元素验证方法使用 valid() 方法，可以在任何时候进行调用。例如在 submit 事件中：
form.addEventListener('submit', e => {
if (!pform.valid('#name')) {
e.preventDefault();
}
});这里，如果 #name 元素验证失败，表单将不会被提交。
表单提交
perfectform 的表单提交方式可以通过 ajax() 方法进行，它接受一个 options 对象，用于配置提交规则，包括提交地址、提交方式、数据序列化方式等。
-- -------------------- ---- -------
----- ------- - -
---- -------------------
------- -------
----- -
----- ------
---- --
--
--------------- ----- -
-- ----- --- ------- -
------ ---------------------
-
------ -----
-
--
--------------------------------- -- -
----------------------
-------------- -- -
-------------------
---这里，ajax() 方法返回了一个 Promise 对象，可以使用 then() 和 catch() 方法进行成功和失败的回调处理。在提交前，perfectform 会自动进行表单验证，如果验证失败，表单将不会被提交。
多文件上传和图片预览
通过 fileInput() 方法可以实现多文件上传和图片预览。fileInput() 方法接受一个 options 对象，用于配置文件上传和图片预览规则。
const options = {
preview: '.preview',
acceptType: 'image',
maxSize: '5M',
limit: 5
};
pform.fileInput('#my-upload', options);这里，#my-upload 是上传文件的表单元素的 ID，options 对象包含四个属性：
preview: 图片预览区域的选择器acceptType: 支持的文件类型（可选：image，audio，video）maxSize: 支持的文件大小（默认：10M）limit: 支持的文件数量（默认：1）
多步表单提交
通过 wizard() 方法可以实现多步表单提交。wizard() 方法接受一个 options 对象，用于配置多步表单提交的规则。
-- -------------------- ---- -------
----- ------- - -
------ -
-
----- ----------
--------- --------- ---------
--
-
----- ----------
--------- -------- ---------
--
-
----- ----------
--------- ------------
-
-
--
----------------------------------- -- -
----------------------
-------------- -- -
-------------------
---这里，options 对象包含一个 steps 数组，数组中的每个元素是一个步骤对象，其中包含两个属性：
form: 表单元素的选择器validate: 需要验证的表单元素的选择器数组
多步表单提交会在每个步骤提交前自动验证当前步骤的表单，如果验证失败，将不会进入下一步。最后一步提交成功后，整个表单数据才会被提交。
总结
perfectform 是一个非常好用的表单验证和提交处理 npm 包，在实际开发中可以大大提高我们的工作效率。本篇文章主要介绍了它的使用方法，分别包括表单验证、表单提交、多文件上传和图片预览、多步表单提交等功能。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726d81e8991b448e8a3c