介绍
在前端开发中，表单是不可或缺的一部分。而表单的验证则是保证表单内容合法性的关键。ember-formality 是一个优秀的验证库，能够帮助我们快速实现表单验证功能。
在这篇文章中，我们将介绍如何使用 npm 包 ember-formality 实现表单验证，包括安装、配置和示例等。
安装
我们可以通过 npm 安装 ember-formality 包，命令如下：
$ npm install ember-formality --save-dev
配置
在我们使用 ember-formality 之前，需要配置一些基本信息。我们需要生成一个 mixin，然后将其添加到我们要验证的组件中。
我们创建一个叫 FormValidatorMixin 的 mixin，并引入 Ember.Formality.Mixin 方法。然后，在 mixin 中初始化表单验证设置并使用函数处理表单验证。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -----------------------------------
------ ------- --------------------------- -
------------ -
-- ------
----- -
--------- -----
------- - -------- - -
--
-- ----
---- -
------------- ----
--
-- ----
------ -
------ ----
-
--
------ -
-- -----
---------------- - ---------------- -- ---
--------------------------
--
-------- -
------ -
-- --------
-- ----------------- -
-- ------------
-
-
-
---使用示例
我们可以创建一个叫 user-form 的组件来演示如何使用表单验证。user-form 组件是一个用于创建用户数据记录的表单，并包含一些必填字段和数据校验规则。
首先，我们需要创建一个 template，包含一些 input，用于获取用户输入数据。
<form>
<input placeholder="Name" {{bind-attr value=name}}>
<input placeholder="Age" {{bind-attr value=age}}>
<input placeholder="Email" {{bind-attr value=email}}>
<button {{action "save"}}>Save</button>
</form>接下来，我们需要将 FormValidatorMixin mixin 添加到 user-form 组件中。
import Ember from 'ember';
import FormValidatorMixin from 'path/to/FormValidatorMixin';
export default Ember.Component.extend(FormValidatorMixin, {
name: null,
age: null,
email: null
});在此基础上，我们完整的 user-form 组件的代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -----------------------------
------ ------- ------------------------------------------ -
----- -----
---- -----
------ -----
-------- -
------ -
-- --------
-- ----------------- -
-- --------
-
-
-
---这里，当用户输入完毕并点击保存按钮时，将会调用 save 函数，并使用 FormValidatorMixin mixin 提供的 validate 函数进行表单校验，然后执行表单数据的操作。
完整的代码示例可以在 https://github.com/ember-formality/ember-formality-example 中查看。
总结
通过本文，我们了解了 npm 包 ember-formality 的安装和配置方法，并提供了具体示例来帮助开发者实现表单验证。表单验证是我们日常前端开发过程中非常重要的技术，掌握它能够更好的提升开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecb13