介绍
form-spine 是一个轻量级的 javascript 库，用于处理前端表单。它的体积很小（只有 3KB）并作为一个 npm 包发布。主要特点是：
- 支持表单验证
- 支持自定义验证规则
- 支持异步验证
- 支持表单序列化
- 支持表单数据封装
安装
你可以使用 npm 安装它，或者将其添加到你的 package.json 中：
npm install form-spine --save-dev
或者使用 Yarn：
yarn add form-spine
当然，你可以直接将 form-spine 下载下来，然后在页面中引入代码：
<script src="path/to/form-spine.min.js"></script>
快速上手
form-spine 的使用非常简单。按照以下步骤进行：
- 使用
form-spine初始化一个表单； - 添加验证规则；
- 注册表单提交事件；
- 编写表单提交事件处理函数。
下面将为你演示详细的例子。
-- -------------------- ---- -------
----- -------------
-----
-------------------
------ ----------- --------------- --
------
-----
------------------
------ --------------- --------------- --
------
-----
--------------------
------ --------------- ------------------------ --
------
-----
------- -------------------------
------
-------
------- -----------------------------------------
--------
--- ------ - --- ----------------------
-------------------------- ------------
-------------------------- ------------
-------------------------- ---------------
----------------------------------- ------------
-------------------------------------- -------- ------- ----- -
-- ------ --- --------------------- -
------ ----------
-
---
----------------------------------- ------------------
------------------------ ---------- -
----------------------
---
---------这个例子演示了如何使用 form-spine 创建一个表单并添加一些验证规则。当表单提交时，它输出了表单数据到控制台中。
在代码中，我们首先初始化表单对象，并添加了一些验证规则。这些规则定义了表单数据应该如何验证，以便检查是否符合要求。此外，我们还添加了一个自定义验证规则 password_match，以确保两次输入的密码必须相同。
最后，我们向表单注册了一个 onSubmit 事件处理函数。这个函数将在表单提交时被调用，并将表单数据作为参数传递给它。
详细使用说明
初始化表单
你可以使用 FormSpine 构造函数将一个表单转换为 form-spine 表单对象。可以通过以下三种方式将一个表单初始化为 form-spine 表单对象：
new FormSpine(selector)：使用一个 CSS 选择器来选取表单元素；new FormSpine(element)：使用一个 DOM 元素来选取表单；new FormSpine(formObject)：使用一个表单 DOM 元素 Object 来实例化表单。
var myForm = new FormSpine('#my-form');在这个例子中，我们用 CSS 选择器 #my-form 来选择表单元素，然后创建了一个 form-spine 表单对象 myForm。
添加验证规则
在 form-spine 中为表单元素添加验证规则，以保证表单数据的有效性。你可以使用 addRule() 实例方法来添加验证规则。addRule() 方法接受两个参数：name 和 rule。
name：表示表单元素的名称。rule：表示该表单元素的验证规则。
这里有一些例子：
// 表单元素 name="foo" 是必须的
myForm.addRule('foo', 'required');
// 表单元素 name="bar" 必须是 "yes" 或 "no"
myForm.addRule('bar', 'in:yes,no');
// 表单元素 name="email" 必须是合法的电子邮件地址
myForm.addRule('email', 'email');你还可以添加多个规则：
myForm.addRule('foo', [
'required',
'minLength:6',
]);这里 foo 必须不为空，则长度应至少为 6。
自定义验证规则
如果你需要更复杂的验证规则，你可以添加自定义验证规则。使用 addCustomRule() 实例方法来添加自定义验证规则。addCustomRule() 方法接受两个参数：
name：验证规则的名称。ruleFunction：验证函数。
-- -------------------- ---- -------
------------------------------ -------- ------- ----- -
-- ----- ---------
-- ---- -------
-- ------ --- ------ -
------ -------- -------
-
---
-- ------- ------ ------
------------------------- ----------在这个例子中，我们添加了一个自定义规则 myRule，它将拒绝值为 "foo" 的输入。最后，将 myRule 添加到一个表单元素上。
你也可以使用 .removeRule() 实例方法来从表单中移除验证规则。
异步验证
对于一些验证规则可能需要网络请求等操作，可以使用异步验证方式，即验证函数执行异步操作。form-spine 支持异步验证：
-- -------------------- ---- -------
---------------------------------------- -------- ------- ----- --------- -
-- ------------- ------
------------------------------------------
-------------- -- ----------------
---------- -- -
-- -------------- -
--------------------
- ---- -
-----------
-
--
--------- -- -
-----------------
---
---
-------------------------- --------------------在这个例子中，我们添加了一个自定义规则 username-checker 来验证用户名是否唯一。这里使用了异步操作，所以验证函数需要传递一个回调函数。如果验证通过，回调函数应该被调用而不带任何参数。错误信息应该作为回调函数的参数传递。
注册表单提交事件
使用 onSubmit() 实例方法来注册表单提交事件。
myForm.onSubmit(function (formData) {
// 当表单提交时，该函数将被调用
// formData 是一个对象，它包含了表单元素的值
console.log(formData);
});表单序列化
表单序列化是将表单数据转换为一组键/值对的过程。你可以使用 serialize() 实例方法将表单数据序列化。
var formData = myForm.serialize(); console.log(formData);
当表单数据被序列化时，serialize() 方法将返回一个对象，它包含了表单元素的名称和值。
{
"username": "john",
"password": "qwerty",
"passwordRepeated": "qwerty"
}表单数据封装
数据封装将处理序列化过程，并在此基础上对表单数据进行进一步的处理。form-spine 支持数据封装功能：
-- -------------------- ---- -------
-------------------------- ---------- -
-- ------------------------------
------ -
------ ---------------
--------- ------------------
----------- -----
--
---
--- ---- - ---------------------------
------------------在这个例子中，我们首先添加了一个封装器函数，该函数将在表单数据序列化后被调用。它将表单数据进行进一步处理，然后返回一个对象。
最后，我们使用新的 serializeEnclosed() 实例方法来将处理过的数据序列化。
结论
form-spine 是一个小而灵活的验证库，用于处理前端表单。它的 API 易于使用，允许你轻松地创建和验证表单。同时，它还支持自定义验证规则、异步验证等高级特性，以帮助你构建更具复杂性的表单验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556eb81e8991b448d3cb6