在现代的 Web 开发中，表单是不可或缺的一部分。但是，表单的验证却经常是让开发者头痛的问题之一。为了解决这个问题，npm 社区中涌现了不少表单验证库。
本文将介绍一个值得一试的 npm 包：Ember-validated-form-buffer，该包提供了一个基于 Ember.js 的表单验证解决方案。
简介
Ember-validated-form-buffer 是一个基于 Ember.js 的表单验证库，它提供了一个包装了表单组件和验证代码的框架。它是一个非常轻量级的库，它只是提供了一些基本的表单验证功能。
在使用这个库之前，你需要先安装 Ember.js，然后通过 npm 安装 ember-validated-form-buffer。安装命令如下：
npm install ember-validated-form-buffer --save
使用教程
现在我们开始使用 Ember-validated-form-buffer 实现一个简单的表单验证示例。
步骤1：定义一个表单组件
我们将定义一个包含两个输入框的表单组件：一个用于输入用户名，一个用于输入密码。
-- -------------------- ---- -------
----- ----------------------------- ----
------
-------
---------
------- ----------- ----------------
--------
-------
---------
------- --------------- ----------------
--------
------- ------------- -------- --------------------------
-------如上述代码所示，我们在表单的每个输入框上都绑定了一个属性。这些属性将作为数据缓冲区，以便它们可以在表单验证期间被访问。
步骤2：导入 Ember-validated-form-buffer 和验证神器
我们将在组件中导入 ember-validated-form-buffer 和 验证神器（validator）模块。
import Ember from 'ember';
import FormBuffer from 'ember-validated-form-buffer';
import { validator, buildValidations } from 'ember-cp-validations';步骤3：定义验证规则
现在我们将定义验证规则并将其添加到组件代码中。我们将使用 ember-cp-validations，一个流行的验证库，来定义规则。
const Validations = buildValidations({
username: validator('presence', true),
password: validator('presence', true)
});在上述代码中，我们使用 buildValidations 创建了一个 Validations 的类。我们使用 validator 函数定义了两个规则：username 和 password 按照正则表达式「presence」进行验证。在这种情况下，presence 确保输入框不为空。
步骤4：定义表单组件
定义表单组件，包装输入框和验证规则。
-- -------------------- ---- -------
------ ------- ----------------------------------- -
--------- ---
--------- ---
------- -----
------ -
--------------------------
------------------ -------------------------
--
-------- -
-------- -
----- - ------- -------- - - ---------------------------- ------------
------------------ ----------- -- -- -
-- ---------------------------- -
----------------------
-----------------------
- ---- -
------------------
-
---
-
-
---如上述代码所示，我们导出了一个组件，该组件继承了 Validations 类。它也有一个数据缓冲区对象，我们通过调用 init 方法来创建，它使用 create 方法从表单组件本身来构建。
我们同样定义了 actions.submit 用来处理提交表单事件，它使用 validate 来执行我们的验证规则。如果验证通过，buffer.applyChanges 方法将被调用，更新表单缓冲区中的数据。如果验证失败，则 buffer.rollback 将会进行备注，以确保它等于最初的值。
步骤5：使用表单组件
最后，我们在使用表单组件的地方添加它。这里我们建立了一个 login template，它有一个包含表单组件的 login-form 元素。
{{!-- app/templates/login.hbs --}}
<h1>Login</h1>
{{login-form onSubmit=(action "loginUser")}}综合示例代码
-- -------------------- ---- -------
-- ----------------------------
------ ----- ---- --------
------ ---------- ---- ------------------------------
------ - ---------- ---------------- - ---- -----------------------
----- ----------- - ------------------
--------- --------------------- ------
--------- --------------------- -----
---
------ ------- ----------------------------------- -
--------- ---
--------- ---
------- -----
------ -
--------------------------
------------------ -------------------------
--
-------- -
-------- -
----- - ------- -------- - - ---------------------------- ------------
------------------ ----------- -- -- -
-- ---------------------------- -
----------------------
-----------------------
- ---- -
------------------
-
---
-
-
----- -------------------- ---- -------
----- ----------------------------- ----
------
-------
---------
------- ----------- ----------------
--------
-------
---------
------- --------------- ----------------
--------
------- ------------- -------- --------------------------
-------{{!-- app/templates/login.hbs --}}
<h1>Login</h1>
{{login-form onSubmit=(action "loginUser")}}总结
在本文中，我们介绍了一个基于 Ember.js 的表单验证库：Ember-validated-form-buffer。我们学习了如何使用 ember-cp-validations 定义验证规则并将它们添加到表单组件中，以及如何使用 FormBuffer 实现数据缓冲区，并在表单验证期间处理表单数据的更新。我们的示例包含了一些基本的验证规则，你可以根据需要使用更多的规则来满足你的业务需求。
希望这篇文章对你有所帮助，让你能够更轻易地处理表单验证问题！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ba563576b7b1ecc37